个人配置
{
"files.autoSave": "onFocusChange",
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.detectIndentation": false,
"eslint._legacyModuleResolve": true,
"eslint.alwaysShowStatus": true,
//配置eslint
"eslint.autoFixOnSave": true,
"editor.fontSize": 14,
"editor.fontFamily": "Consolas",
//换行
"editor.wordWrap": "on",
"editor.renderWhitespace": "boundary",
"editor.tabSize": 2,
"editor.useTabStops": false,
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
],
"eslint.options": {
"plugins": ["html"]
},
//关闭自动更新扩展
"extensions.autoUpdate": false,
"files.trimTrailingWhitespace": false,
"files.autoSaveDelay": 3000,
// gitlens配置
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": true,
"suppressCommitNotFoundWarning": true,
"suppressFileNotUnderSourceControlWarning": true,
"suppressGitVersionWarning": true,
"suppressLineUncommittedWarning": true,
"suppressNoRepositoryWarning": true,
"suppressResultsExplorerNotice": true,
"suppressShowKeyBindingsNotice": true
},
"git.confirmSync": false,
"html.format.indentInnerHtml": true,
"html.validate.scripts": true,
"typescript.validate.enable": true,
"javascript.validate.enable": true,
"javascript.format.enable": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"css.validate": false,
"less.validate": false,
"search.followSymlinks": false,
"scss.validate": true,
"typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
"typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
//右键格式化文件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.validation.template": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "vscode-icons",
}VS Code JavaScript(ES6) snippets ： 当前最流行的，已有超过 120 万的下载量。这个插件为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持；
JavaScript Snippets ： 提供了 ES6 代码片段的集合。它包含对 Mocha、Jasmine 等其他 BBD(Behavior-Driven Development)测试框架的支持；
vetur ： Vue 的语法高亮、智能感知、Emmet 等；
VueHelper ： snippet 代码片段；
IntelliJ IDEA Keybindings ： webstorm 的快捷键（如果之前用 webstorm 开发，建议安装）；
HTML Snippets ： 超级实用且初级的 H5 代码片段以及提示；
HTML CSS Support ： 让 html 标签上写 class 智能提示当前项目所支持的样式，新版已经支持 scss 文件检索；
Csscomb：css 、less、sass 的代码格式化；
Guides： 代码的标签对齐线。
Debugger for Chrome ： 让 vscode 映射 chrome 的 debug 功能，静态页面都可以用 vscode 来打断点调试，需要另外配置，有点麻烦；
jQuery Code Snippets ： jquery 重度患者必须品；
vscode-icon ： 让 vscode 资源树目录加上图标；
Path Intellisense ： 自动路劲补全；
Npm Intellisense ： require 时的包提示（最新版的 vscode 已经集成此功能）；
ESlint ： ESlint 接管原生 js 提示，可以自定制提示规则；
HTMLHint ： html 代码检测；
Project Manager ： 在多个项目之前快速切换的工具；
beautify ： 格式化代码的工具；
Atuo Rename Tag ： 修改 html 标签，自动帮你完成尾部闭合标签的同步修改，不过有些 bug；
GitLens ： 丰富的 git 日志插件；
Bracket Pair Colorizer ： 让括号拥有独立的颜色，易于区分。可以配合任意主题使用；
CSS Peek ： 使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码；
File Peek：
Vue Peek：
Prettier ： Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件；
koroFileHeader：自动生成头部注释
注：ESlint 代码格式仍然报错解决方法
vscode 在设置中搜索行尾，选择 LF，已创建的文件右下角直接切换, 或者.eslintrc.js 文件的 rules 字段添加 ‘linebreak-style’: [‘off’, ‘windows’]
GitLens: 虽然Git功能已内置于 VS Code 中，但 GitLens 能够提供更多的版本控制功能来“增强”你的编辑器。它提供了对代码的深入分析功能，可以向你显示更改时间以及更改后的代码。你甚至可以比较不同的分支、标签和提交。总的来说，这个扩展插件会让你拥有全新的视觉感受。
Bracket Pair Colorizer 2: Bracket Pair Colorizer 2 是一个简单的扩展，可以使代码更容易阅读。它可以对匹配括号的对代码着色，使你可以非常直观地确定函数的开始和结束位置。还可以选择要使用的颜色。
- live server
- live share
- Live Sass Compilerritwickdey
- colorize
- CSS Blocks
