hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 开发工具 - 正文 君子好学,自强不息!

【编程开发工具】高效开发者是怎样个性化 VS Code 插件与设置的?

2019-11-21开发工具搜奇网50°c
A+ A-
2年之前,我摒弃了Sublime Text,挑选了Visual Studio Code作为代码编辑器。

我天天花在VS Code上的时刻长达5~6个小时,因而根据我的需求优化VS Code设置十分必要。过去这2年里,我试过林林总总的插件与设置,而如今我觉得一切都完美了,是时刻给人人分享一下我的运用技能了!

插件

VS Code有着异常丰富的插件,这里我给人人引荐几个我最喜好的VS Code插件。

Prettier Code Formatter

下载量:167万

我运用Prettier来一致代码作风,当我保留HTML/CSS/JavaScript文件时,它会自动调解代码花样。如许,我不必忧郁代码花样问题了。由于Prettier自身不能个性化设置,偶然能够会引起不适,然则最少保证团队成员能够随意马虎一致代码作风。

npm

下载量:119万

npm插件能够搜检package.json中所定义的npm模块与现实装置的npm模块是不是一致:

  • package.json中定义了,然则现实未装置

  • package.json中未定义,然则现实装置了
  • package.json中定义的版本与现实装置的版本不一致

npm Intellisense

下载量:105万

npm Intellisense插件会为package.json竖立索引,如许当我require某个模块时,它能够自动补全。

Bracket Pair Colorizer

下载量:95万

Bracket Pair Colorizer能够为代码中的婚配的括号自动着色,以差别的色彩举行分辨,如许我们能够随意马虎地分辨某个代码块的最先与完毕。

Auto Close Tag

下载量:117万

Auto Close Tag插件的功用异常简朴,它能够自动补全HTML/XML的封闭标签。

GitLens

下载量:164万

我异常喜好Gitlens,由于它能够协助我疾速明白代码的修正汗青。

Current Line Blame:检察当前行代码的末端检察近来一次commit的姓名、时刻以及信息

Current Line Hovers:在当前行代码的悬浮框检察细致的近来一次的commit信息。

Markdown All in One

下载量:45万

Markdown All in One插件协助我编写README以及其他MarkDown文件。我特别喜好它处置惩罚列表以及表格的体式格局。

自动调解列表的数字序号

自动花样化表格

用户设置

除了装置林林总总的插件,我们还能够经由过程设置VS Code的User Settings来个性化我们的VS Code。

字体设置

我异常喜好带有ligatures(合字、连字、贯穿连接字或合体字)的字体。ligatures就是将多于一个字母的合成一个字形。我重要运用Fira Code作为我编程所运用的字体,以下图中的=>===

我的字体设置以下:

"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', 
                       Menlo, Monaco, monospace",
"editor.fontLigatures": true

关于缩进,我是如许设置的:

 "editor.detectIndentation": true,
 "editor.renderIndentGuides": false,

import途径挪动或许重命名时,自动更新:

"javascript.updateImportsOnFileMove.enabled": "always",

user-settings.json

下面是我的VS Code的设置文件user-settings.json

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#111111",
        "activityBarBadge.background": "#FFA000",
        "list.activeSelectionForeground": "#FFA000",
        "list.inactiveSelectionForeground": "#FFA000",
        "list.highlightForeground": "#FFA000",
        "scrollbarSlider.activeBackground": "#FFA00050",
        "editorSuggestWidget.highlightForeground": "#FFA000",
        "textLink.foreground": "#FFA000",
        "progressBar.background": "#FFA000",
        "pickerGroup.foreground": "#FFA000",
        "tab.activeBorder": "#FFA000",
        "notificationLink.foreground": "#FFA000",
        "editorWidget.resizeBorder": "#FFA000",
        "editorWidget.border": "#FFA000",
        "settings.modifiedItemIndicator": "#FFA000",
        "settings.headerForeground": "#FFA000",
        "panelTitle.activeBorder": "#FFA000",
        "breadcrumb.activeSelectionForeground": "#FFA000",
        "menu.selectionForeground": "#FFA000",
        "menubar.selectionForeground": "#FFA000"
    },
    "editor.fontSize": 14,
    "editor.lineHeight": 24,
    // These are for subliminal, check them out.
    "editor.hideCursorInOverviewRuler": true,
    "editor.lineNumbers": "on",
    "editor.overviewRulerBorder": false,
    "editor.renderIndentGuides": false,
    "editor.renderLineHighlight": "none",
    "editor.quickSuggestions": true,
    // end subliminal changes
    "editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 
                   'Source Code Pro', Menlo, Monaco, monospace",
    "vsicons.projectDetection.autoReload": true,
    "editor.formatOnPaste": false,
    "editor.formatOnSave": true,
    "editor.fontLigatures": true,
    "prettier.tabWidth": 4,
    "editor.wordWrap": "on",
    "editor.detectIndentation": true,
    "workbench.iconTheme": "eq-material-theme-icons-palenight",
    "editor.minimap.enabled": false,
    "editor.minimap.renderCharacters": false,
    "prettier.parser": "flow",
    "workbench.editor.enablePreview": false,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "jsx-sublime-babel-tags": "javascriptreact"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.showExpandedAbbreviation": "never",
    "workbench.statusBar.visible": true,
    "workbench.activityBar.visible": true,
    "workbench.editor.showIcons": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "explorer.confirmDelete": false,
    "window.zoomLevel": 0,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "materialTheme.accent": "Yellow",
    "editor.cursorBlinking": "smooth",
    "editor.fontWeight": "500"
}

假如你想晓得更多的VS Code运用技能,能够检察VSCode Can Do That。

原文地点:http://tilomitra.com/vs-code-settings-and-extensions-for-faster-javascript-development/

本文采纳意译,版权归原作者一切

引荐教程:vscode教程

以上就是高效开发者是怎样个性化 VS Code 插件与设置的?的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【编程开发工具】高效开发者是怎样个性化 VS Code 插件与设置的?

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

本文来源:搜奇网

本文地址:https://www.sou7.cn/282636.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>