vscode 插件记录下

vscode插件安装

• Dracula Official 主题
• Atom One Dark Theme 主题
• Material Icon Theme 图标主题
• Bracket Pair Colorizer 每一对括号不同颜色 （括号强迫症必备）
• indent-rainbow 凸显缩进着色，让你的缩进一目了然
• EditorConfig for VS Code vscode的风格配置文件
• GitLens 在代码中显示每一行代码的提交历史
• Chinese Language Pack 中文语言包

---

水桶装！直接全部安装，插件互不干扰。
根据【插件作用范围】，对于用不到的插件，不必安装
插件列表中, Ctrl+鼠标左键 点击标题 可以弹出对应官方介绍

---

• Auto Rename Tag - 自动重命名配对的HTML / XML标记 【全局】
• Bookmarks 对代码片段添加书签，便于跳转 【全局】
• Code Runner node，python等代码不必开命令行即可运行 【全局】
• Comment Translate 自动将英文翻译为中文 【全局】
• HTML CSS Support 便于在html/css文件中快速书写属性 【 Supported Languages】
• JavaScript (ES6) code snippets 快速书写ES6代码 【Supported languages】
• cssrem 将css中的px自动转换为rem.再也不用计算器（大漠推介） 【局部】
• Prettier 格式化，使用Prettier标准风格【局部】**
• Eslint Js 语法检测 【全局】
• Tslint Typescript 语法检测 【ts，js文件】
• TypeScript Hero 快速书写Ts代码 【ts文件】
• JSON to TS 将json代码转变为Ts代码 【全局】
• markdownlint md文件预览 【md文件】
• Markdown All in One md文件格式化 【md文件】
• Babel JavaScript Js文件转译 【js文件】
• VS Code ES7 React/Redux/React-Native/JS snippets 快速书写React(非react项目，禁用) 【js文件】
• Python tab与空格的痛苦，写过python的都知道 【py文件】
• XML Tools XML文件格式化高亮**【xml文件】**
• Flutter 2018是 Flutter 最火爆的一年，2020生态繁荣发展中 【dart文件】
• Awesome Flutter Snippets flutter 代码片段速写 【dart文件】
• Built Value Snippets 配合Built Value快速生成模型 【dart文件】

---

• View In Browser 迅速通过浏览器打开html文件 【局部】

• Css Peek 在Html和Css文件中定位class和id样式. （右键单击选择器时，选择 Go to Definition和 Peek definition，vue中不可用）【html/css文件】

• Path Intellisense 路径识别,书写文件引入地址时很方便。遗憾就是，对webpack项目中的路径别名无法扩展 【全局】

• npm Intellisense 在import语句中，自动填充npm模块。【js文件】

• language-stylus CSS预处理器，styl后缀文件的识别扩展 【styl文件】

• filesize 在底部状态栏左侧，显示当前文件大小，还可以点击哟 【全局】

• Better Comments 对注释内容着色。快捷方式： 编辑器内输入 //*, 按Tab键 【全局】

• Live Server 快速启动一个本地服务器 【全局】

---

以下插件为：可选以及不推介安装。
以下插件 要么会导致VS体验变差，甚至快捷键冲突，如果没有相关需求，不再建议安装。

• Sublime Text Keymap 启动sublimeText的快捷键配置 (学着去适应Vscode的快捷键)
• Visual Studio IntelliCode 支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发，因此支持Node。安装之后，在Js代码书写中会给出AI提示。不进行AI开发的人员，无需安装)

setting.json 设置

{

  //使用Fira Code字体

  "editor.fontFamily": "Fira Code Light, Consolas, Microsoft YaHei",

  //开启连体字

  "editor.fontLigatures": true,

  // 当一行的字符超过400个，进行换行

  "editor.wordWrapColumn": 400,

  //字体大小

  "editor.fontSize": 15,

  // 主题

  "workbench.iconTheme": "material-icon-theme",

  // 是否显示可能用到的示例代码.安装插件过多，建议选项也会非常多

  "editor.quickSuggestions": {

    "other": true,

    "comments": true,

    "strings": false

  },

  // 粘贴的内容, 是否自动格式化

  "editor.formatOnPaste": false,

  // 保存文件时，则自动格式化 （注意：如果此条规则开启，那么 { codeActionsOnSave source.fixAll }则应该设置为关闭，否则在文件保存时，会被自动格式化两次,没有必要）

  "editor.formatOnSave": true,

  "editor.codeActionsOnSave": {

    "source.organizeImport": true,

    "source.fixAll": false, // 对所有文件，保存时自动格式化

    "source.fixAll.eslint": false, // 定制. 也可以在文件保存时，禁用eslint规则生效

    "source.fixAll.tslint": false,

    "source.fixAll.stylelint": false

  },

  // css2rem插件: 书写css时，px单位自动提示转换为rem单位

  // 此处根字体大小设置为100（默认为16）

  "cssrem.rootFontSize": 100,

  "[html]": {

    // 对html文件，使用 vscode.html-language-features(HTML语言功能) 进行格式化

    "editor.defaultFormatter": "vscode.html-language-features"

  },

  "[css]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[less]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[scss]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  },

  "[json]": {

    // 对json文件，使用 JSON语言功能 进行格式化

    "editor.defaultFormatter": "vscode.json-language-features"

  },

  "breadcrumbs.enabled": true, // 启用/禁用顶部面包屑导航（可以直接跳转文件）

  // vscode已经内置了emmet。配置emmet是否启用tab展开缩写

  // 这一设置最大作用是：当输入的文本不属于Emmet定义的缩写规则时，依然允许使用Tab键进行缩进。此时会提示我自定义的缩写语句，以及各插件自定义的缩写语句.

  "emmet.triggerExpansionOnTab": true,

  // "emmet.showSuggestionsAsSnippets": true, // 是否启用emmet代码提示

  "eslint.validate": [

    // eslint规则对以下几种后缀文件生效

    "javascript",

    "javascriptreact",

    "html",

    "typescript",

    "typescriptreact"

  ],

  "[typescript]": {

    // 对ts文件进行格式化时，使用哪一种风格 (此处使用的是vscode中安装的ts插件默认风格进行格式化)

    "editor.defaultFormatter": "vscode.typescript-language-features"

  },

  "git.autofetch": true, // 在push代码时，是否先自动从远端拉取代码

  "gitlens.advanced.messages": {

    // 配置gitlen中git提交历史记录的信息显示情况

    "suppressCommitHasNoPreviousCommitWarning": false,

    "suppressCommitNotFoundWarning": false,

    "suppressFileNotUnderSourceControlWarning": false,

    "suppressGitVersionWarning": false,

    "suppressLineUncommittedWarning": false,

    "suppressNoRepositoryWarning": false,

    "suppressResultsExplorerNotice": false,

    "suppressShowKeyBindingsNotice": true,

    "suppressUpdateNotice": true,

    "suppressWelcomeNotice": false

  },

  "[dart]": {

    // 保存文件时，是否自动格式化代码，

    "editor.formatOnSave": true,

    // 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`).

    "editor.formatOnType": true,

    // 在80个字符处画一条引导线，这个范围内的dart代码将被格式化。

    "editor.rulers": [

      80

    ],

    // 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响Dart突出显示所选变量的精确引用的能力。

    // "editor.selectionHighlight": false,

    // 默认情况下，当处于“代码片段模式”（在插入的代码中编辑占位符）时，VS会防止snippets弹出打开。

    // 如果设置为“false”，则表示允许完成操作打开，就像不在代码段占位符中

    // "editor.suggest.snippetsPreventQuickSuggestions": true,

    // coding时，VScode会给我们给多提示，在所有的提示选项中会默认选中第一个，这一配置就是表示默认选中哪一项。

    // 默认值为："first"，表示VScode将总是选中第一项

    // （推介） "recentlyUsed" 表示vs code将从代码提示中，预先选中最近使用过的项，

    "editor.suggestSelection": "recentlyUsedByPrefix",

    // 允许使用按<tab>速写代码片段，例如，输入“for”时，即使完成列表不可见。

    "editor.tabCompletion": "onlySnippets",

    // 默认情况下，当前的语言没有代码片段提示时，VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。

    // 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况

    // 对于dart来说最好关闭，对于html和css建议开启

    "editor.wordBasedSuggestions": false,

    // 在文件底部添加新代码行时，强制所有文件都有一行空格。

    "files.insertFinalNewline": true

  },

  "[jsonc]": {

    "editor.defaultFormatter": "vscode.json-language-features"

  },

  "editor.suggestSelection": "first",

  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

  "typescript.updateImportsOnFileMove.enabled": "always"

}