大家好，又见面了，我是你们的朋友全栈君。
vscode最佳配置
- 最近更新时间： 2021.09.15 （Vscode v1.60.1）
- vscode 配置文件内容在最后，
可直接copy使用
配置详解
editor是针对vscode的风格设置例如tabSize：一个tab等于2个空格，行高为24px
workbench是针对vscode的主题设置例如 iconTheme（ 图标风格）：使用插件 vscode-great-icons （需搜索安装）
search.exclude配置vscode中项目中的哪些地方被排除搜索,避免你每次搜索结果中都有一大堆无关内容
代码语言：javascript复制
files.associations配置文件关联 : 任何 vue 后缀的文件会被认为是 html 文件 ，(查看编辑器右下角) 然后 vscode 会用 html 规则匹配 vue 文件做相应格式化，代码提示等。 任何 wxss 后缀的文件被认为是 css 文件 ，然后 vscode 会用 css 规则匹配 wxss 文件，对 css 的属性排序，rem 自动转换，格式化等
"files.associations": {
"*.vue": "html",
"*.wxss": "css"
}收藏文章/复制粘贴最好。会持续更新
apicloud是用于同步 vscode 开发apicloud程序时进行手机wifi真机同步使用，不用数据线即可进行PC修改代码，真机调试。
vetur和prettier以及stylus是用于vue开发时的代码格式化, 代码提示.
filesize在底部状态栏左侧，显示当前文件大小，没啥用
Live Server快速启动本地服务器，注意只对.html和.htm文件有效。对html文件点击鼠标右键，选择open with Live Server.
屏幕阅读器优化, 可选项. 此功能是 vscode 专门配合盲人阅读器而做的贴心选项，对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音) 例如：当你开启后，鼠标悬浮在桌面任何位置，语音朗读器都会朗读出来所在位置的内容。一旦在vscode中开启，那么底部会显示如图所示。具体设置在文尾。
vscode插件安装
Dracula Official主题（我的最爱）Material Icon Theme图标主题Chinese Language Pack中文语言包GitLens在代码中显示每一行代码的提交历史Git History对比查看git历史版本indent-rainbow凸显缩进着色，让你的缩进一目了然
水桶套装！直接安装全部插件，插件互不干扰。 vscode插件列表中, Ctrl 鼠标左键 点击标题 会弹出对应官方介绍
-
Tabnine AI– AI 代码完成插件 【全局】 -
Code RunnerF5, 运行！ 【全局】 -
Image preview图片预览 【全局】 -
Color Highlight颜色高亮 【全局】 -
Comment Translate自动将英文翻译为中文 【全局】 -
Auto Rename Tag– 自动重命名配对的HTML / XML标记 【全局】 -
HTML CSS Support在html/css文件中快速书写属性 【 Supported Languages】 -
JavaScript (ES6) code snippets快速书写ES6代码 【Supported languages】 -
cssrem将css中的px自动转换为rem.再也不用计算器（大漠推介） 【局部】 -
Regex Previewer边写正则边看结果 【全局】 -
Prettier格式化，全世界都在使用Prettier来统一风格【局部】** -
EslintJs 语法检测 【全局】 -
TslintTypescript 语法检测 【ts，js文件】 -
JSON to TS将json代码转变为Ts代码 【全局】 -
Vetur快速书写Vue代码 【vue文件】 -
Vue 2 Snippets快速新建一个vue页面（参考文章） 【全局】 -
Markdown Preview EnhancedMarkdown文件预览 【md文件】 -
Markdown All in OneMarkdown全功能snippet 【md文件】 -
koroFileHeader生成文件头部备注 【md文件】 -
XML ToolsXML文件格式化以及高亮 【xml文件】 -
DotENVenv文件高亮 【xml文件】 -
Bookmarks对代码片段添加书签，便于跳转 【全局】 -
Pythontab与空格的痛苦，写过python的都知道 【py文件】 -
FlutterFlutter ! yyds 【dart文件】 -
Awesome Flutter SnippetsFlutter 代码片段速写 【dart文件】 -
Built Value Snippets配合Built Value快速生成 dart 模型 【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-stylusCSS预处理器，styl后缀文件的识别扩展 【styl文件】 -
filesize在底部状态栏左侧，显示当前文件大小，还可以点击 【全局】 -
Better Comments对注释内容着色。快捷使用： 编辑器内输入 /**, 再按Tab键 【全局】 -
REST Client类似 postman ，直接在 VScode 中模拟发送http请求，调试可用 【全局】 -
Live Server快速启动一个本地服务器 【全局】
以下插件为：可选以及不推介安装。 以下插件 要么会导致VS体验变差，要么会导致快捷键冲突，如果没有相关需求，不再建议安装。
Sublime Text Keymap启用sublimeText的快捷键配置 (sublimeText的老用户学着去适应Vscode的快捷键吧)Visual Studio IntelliCode支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发，因此支持Node，安装之后，在Js代码书写中会给出代码提示。不进行AI开发的人员，无需安装)Bracket Pair Colorizer2每一对括号不同颜色 （太受欢迎，vscode已内置此功能）VS Code ES7 React/Redux/React-Native/JS snippets快速书写React(非react项目，禁用) 【js文件】React Native Tools支持React Native项目，快速书写 es6 及 jsx (非react项目，禁用)【js文件】C/C运行React Native项目时，查看某些文件的需要这个 【全局】
{
// VScode主题配置
"editor.tabSize": 2,
"editor.lineHeight": 24,
"editor.renderLineHighlight": "none",
"editor.renderWhitespace": "none",
"editor.fontFamily": "Consolas",
"editor.fontSize": 15,
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.wordWrap": "off", // 永不换行
"editor.wordWrapColumn": 400,
"editor.linkedEditing": true,
"explorer.confirmDelete": false,
"workbench.startupEditor": "newUntitledFile",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Dracula Soft",
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground": "#ff0000" // 设置guide线高亮颜色,可以改为自己喜欢的颜色
},
"workbench.editor.limit.enabled": true, // 是否限制每一个VSCODE窗体内显示的编辑器窗体数量（默认为关闭）。
"workbench.editor.limit.perEditorGroup": true, // 是对打开的所有VSCODE窗体进行限制还是只对当前VSCODE窗体限制
"workbench.editor.limit.value": 8, // 打开的编辑器的最大数量（默认为10，超出数量会自动关闭）
// 代码提示显示位置，控制自定义代码片段所处位置。许多插件都有snippet代码提示功能，top表示自定义片段会优先显示在最上方
"editor.snippetSuggestions": "top",
// 代码提示默认选中项。coding时，VScode会给出很多提示，在所有的提示选项中会默认选中一个，这一配置就是表示默认选中哪一项。
// 此项配置十分精妙，自己改改探索一下。
// "first"：VScode将总是选中第一项
// "recentlyUsed"：（默认值）vscode将从代码提示中，预先选中最近使用过的项
// "recentlyUsedByPrefix"： （推介）vscode将从所有可用代码提示片段中，预先选中最近使用过的项，支持联想功能
"editor.suggestSelection": "first",
"editor.quickSuggestions": {
// 是否显示可能用到的示例代码.安装插件过多，建议选项也会非常多
"other": true,
"comments": true,
"strings": false
},
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
// css2rem插件: 书写css时，px单位自动提示是否转换为rem单位
// 此处根字体大小设置为100（默认为16）, 注意与你项目中rem数值保持一致
"cssrem.rootFontSize": 100,
// 推介终端启动快捷键: ctrl shift C
// 配置 vscode 默认打开外部终端为 Cmder
"terminal.external.windowsExec": "D:\Asoftware\cmder\Cmder.exe",
// 配置 vscode 内部集成 Cmder 终端
"terminal.integrated.defaultProfile.windows": "Command Prompt",
"terminal.integrated.profiles.windows": {
"PowerShell": {
"source": "PowerShell",
"icon": "terminal-powershell"
},
"Command Prompt": {
"path": [
"${env:windir}\Sysnative\cmd.exe",
"${env:windir}\System32\cmd.exe"
],
"args": [
"/k D:\Asoftware\cmder\vendor\init.bat"
],
"icon": "terminal-cmd"
},
"Git Bash": {
"source": "Git Bash"
}
},
"javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或者修改文件名时，是否自动更新引用了此文件的所有文件。
"[json]": {
// 对json文件，使用 vscode内置JSON语言功能 进行格式化
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
// 对html文件，使用 vscode内置html语言功能 进行格式化.(安装prettier后，prettier就会更改此项。我选择不使用 prettier)
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
// 可选值： eslint ："dbaeumer.vscode-eslint" vetur: "octref.vetur" prettier: "esbenp.prettier-vscode"
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
// 对ts文件进行格式化时，使用哪一种风格 (此处使用的是vscode中安装的ts插件默认风格进行格式化)
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"breadcrumbs.enabled": true, // 启用顶部面包屑导航（可直接跳转文件）
"open-in-browser.default": "chrome", // 配置打开html文件的默认浏览器
"search.exclude": {
// VScode进行文件搜索时，不搜索这些区域。
"**/node_modules": true,
"**/bower_components": true,
"**/*.code-search": true,
"**/.DS_Store": true,
"**/.git": true,
"**/.gitignore": true,
"**/.idea": true,
"**/.svn": true,
"**/.vscode": true,
"**/build": true,
"**/dist": true,
"**/tmp": true,
"**/yarn.lock": true,
"**/assets": true
},
// 配置是否在左侧目录列表中显示该文件/文件夹
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/*.g.dart": true,
},
// 配置文件关联
"files.associations": {
// 比如小程序中的 .wxss 这种文件，会把它作为css文件来处理，以便相关插件提供对应的css的语法提示，css的格式化等。
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.ts": "typescript",
"*.vue": "vue",
"*.dart": "dart",
"*.json": "jsonc",
".prettierrc": "jsonc"
},
// 配置emmet是否启用tab展开缩写
// vscode已经内置emmet,这一设置最大作用是：当输入的文本不属于Emmet定义的缩写规则时，依然允许使用Tab键进行扩展。此时会提示自定义的缩写语句，以及各插件自定义的缩写语句.
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true, // 是否将自定义的代码片段作为提示建议显示。
"emmet.syntaxProfiles": {
// 配置emmet支持哪些类型的文件
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"xml": {
"attr_quotes": "double"
}
},
"emmet.includeLanguages": {
"wxml": "html",
"vue-html": "html",
"javascript": "javascriptreact",
"jsx-sublime-babel-tags": "javascriptreact", // 在 react 的jsx中添加对emmet的支持
},
// ===================格式化文件================
// 粘贴后的内容, 是否自动格式化
"editor.formatOnPaste": false,
// 格式化快捷键: shirt alt F
// 自动删除代码中无用的 import 引用,并排序: shift alt o
// 使用 shirt alt F 进行格式化时，先执行编辑器的格式化规则，然后执行 eslint 和 tslint 等其他插件格式化规则。
// vetur - prettier 可用格式化规则配置
// "vetur.format.defaultFormatterOptions": {
// "prettier": {
// "printWidth": 130,
// "tabWidth": 2,
// "useTabs": false,
// "singleQuote": false, // 单引号
// "semi": true, // 未尾封号
// "trailingComma": "none", // es5:object和array最后一个属性后面，是否添加逗号
// "proseWrap": "never",
// "bracketSpacing": true,
// "jsxBracketSameLine": false,
// "arrowParens": "always",
// "insertPragma": false,
// "vueIndentScriptAndStyle": true,
// "quoteProps": "as-needed",
// "jsxSingleQuote": false, // jsx单引号
// "requirePragma": false,
// "htmlWhitespaceSensitivity": "strict",
// "endOfLine": "lf",
// }
// },
/// if => 关闭编辑器自带保存格式化功能，此功能会用Vetur进行格式化
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
// 自动对 import 这种符合CommonJS规范语句进行排序，
// 要使此功能生效，要求使用到星号的语句写在当前文件顶部，例如：import * as Some from "R"
"source.organizeImport": true,
// 自动引入缺少的库
"source.addMissingImports": true,
/// else =>
"source.fixAll": true, // 对所有文件，保存时自动格式化
// "source.fixAll.eslint": false, // 更细. 在文件保存时，eslint规则生效。此配置会影响 eslint.format.enable
// "source.fixAll.tslint": false, // 更细. 在文件保存时，tslint规则生效。 此配置会影响 typescript.validate.enable
// "source.fixAll.stylelint": false // 更细. 在文件保存时，stylelint样式规则生效
},
"eslint.options": {
// eslint配置文件 ,修改为你自己项目文件位置，或者直接删除
// 建议统一使用prettier进行配置
// "configFile": "D:/worksapce/vue-project/.eslintrc.js",
},
// eslint规则对以下几种类型文件生效
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"typescript",
"typescriptreact",
"vue"
],
// 是否开启 tslint代码规范检测 (与eslint 开启一种即可)
"typescript.validate.enable": false,
"git.autofetch": true, // 在push代码时，是否先自动从远端拉取代码
"git.enableSmartCommit": true,
"gitlens.advanced.messages": {
// 配置gitlen中git提交历史记录的信息显示情况
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false
},
"debug.openDebug": "openOnDebugBreak", // 断点调试时，遇到断点，自动显示调试视图。（全局，不可为每种语言单独配置）
/// **python开发专用配置**
"python.linting.enabled": false, // 是否格式化python文件
"minapp-vscode.disableAutoConfig": true, // 微信小程序是否自动配置
/// **apicloud开发专用配置** 。
"apicloud.port": "23450", // 设置apicloud在vscode中的wifi真机同步时的端口
"apicloud.subdirectories": "/apicloudproject", // 设置apicloud在vscode中的wifi真机同步根目录，默认可不设置
/// **dart语言专用配置**
"dart.checkForSdkUpdates": false,
"dart.previewLsp": true,
"dart.warnWhenEditingFilesOutsideWorkspace": true,
"dart.openDevTools": "flutter",
"dart.enableCompletionCommitCharacters": true,
"dart.flutterHotRestartOnSave": true,
"dart.lineLength": 120,
"dart.previewFlutterUiGuides": true,
"dart.triggerSignatureHelpAutomatically": true,
"dart.debugSdkLibraries": true,
"dart.debugExternalPackageLibraries": true
"[dart]": {
// 保存文件时，是否自动格式化代码，
"editor.formatOnSave": true,
// 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`).
"editor.formatOnType": true,
// 在120个字符处画一条引导线，这个范围内的dart代码将被格式化。
"editor.rulers": [
120
],
// 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响Dart突出显示所选变量的精确引用的能力。
"editor.selectionHighlight": false,
// 默认情况下，当处于“代码片段模式”（在插入的代码中编辑占位符）时，VS会防止snippets弹出打开。
// 如果设置为“false”，则表示允许完成操作打开，就像不在代码段占位符中
"editor.suggest.snippetsPreventQuickSuggestions": true,
"editor.suggestSelection": "recentlyUsedByPrefix",
// 允许使用按<tab>速写代码片段，例如，输入“for”时，即使完成列表不可见。
"editor.tabCompletion": "onlySnippets",
// 默认情况下，当前的语言没有代码片段提示时，VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。
// 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况
// 对于dart来说最好关闭，对于html和css建议开启
"editor.wordBasedSuggestions": false,
// 在文件底部添加新代码行时，强制所有文件都有一行空格。
"files.insertFinalNewline": true
},
/// **java语言专用配置**
// 由于我本机java版本为 Java1.8 , vscode内置的vscode-java依赖于openJDK 并且要求版本大于等于 11，所以总是会弹出一个报错窗口。
// https://github.com/redhat-developer/vscode-java/wiki/JDK-Requirements#java.configuration.runtimes，解决办法如下
// 1. 下载 openJDK11 并安装，下载地址：https://adoptopenjdk.net/
// 2. 配置 java.home 为刚刚安装的 openJDK11 的位置
// 3. 由于我只希望在Vcode中使用JDK11版本，在实际项目中的配置不变，所以配置 java.configuration.runtimes
"java.home": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
"java.configuration.runtimes": [
{
"name": "JavaSE-1.8",
"path": "C:/Program Files/Java/jdk1.8.0_211",
},
{
"name": "JavaSE-11",
"path": "C:/Program Files/JavaAdoptOpenJDK/jdk-11.0.8.10-hotspot",
"default": true
},
],
// 多行注释合并
"commentTranslate.multiLineMerge": true,
// 注释采用简洁模式
"commentTranslate.concise": true,
// VScode更新后，是否显示版本changeLog
"versionlens.suggestions.showPrereleasesOnStartup": true,
"liveServer.settings.donotShowInfoMsg": true,
"vetur.ignoreProjectWarning": true,
"security.workspace.trust.untrustedFiles": "open",
"editor.bracketPairColorization.enabled": true,
}其他功能
1. Screen Reader（屏幕阅读器）
支持windows7以上操作系统，不支持mac，作为练习英语听力的小玩具.
首先下载并安装软件，Nvda, 需要的pass: he2m 安装完成此软件后启动。在vscode中配置项
editor.quickSuggestions决定是否开启.
2. vue 项目，代码规范
vscode中使用eslint 和prettier进行格式化(可以无缝衔接setting.json配置)
3. react 项目，额外配置
react项目（使用 npx create-react-app my-app 创建），有时会发现eslint检验规则不生效，此时在当前项目，需要额外安装2个插件。
- npm install –save-dev eslint-plugin-html eslint-plugin-react
- 要么删除此项配置，要么配置为你自己的校验规则地址
"eslint.options": {
"configFile": "D:/worksapce/my-app/.eslintrc.js",
}4. 插件快捷键冲突问题
插件安装过多时，不可避免会出现快捷键冲突。为了解决冲突，需要打开快捷键清单，根据插件名称搜索对应插件快捷键，比如我输入: emmet, 对准任意一条快捷键选项，点击鼠标右键，选择显示相同的按键绑定,修改为自己喜欢的快捷键即可。（建议仅对冲突的进行更改）
文件 --> 首选项 --> 键盘快捷方式- vscode配置历史版本
—— 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/125833.html原文链接：https://javaforall.cn
