个人配置
{
"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