Best configuration of vscode
-
Last update time: 2023.02.18 (Vscode v1.17)
-
The content of the vscode configuration file is at the end,
可直接copy使用
Detailed configuration
editorIt is for vscode风格设置
For exampletabSize: a tab is equal to 2 spaces, and the row height is 24px
workbenchIt is for vscode主题设置
For example, iconTheme (icon style): use the plug-in vscode-great-icons (need to search and install)
search.excludeConfigure which places in the project in vscode are excluded from the search, so as to avoid a lot of irrelevant content in your search results every time
files.associationsProfile associations:Any file with a vue suffix will be considered as an html file, (check the lower right corner of the editor) and then vscode will use html rules to match the vue file for corresponding formatting, code hints, etc.
Any wxss suffix file is considered a css file, and then vscode will use css rules to match wxss files, sort css attributes, rem automatic conversion, formatting, etc.
"files.associations": {
"*.vue": "html",
"*.wxss": "css"
}
收藏文章/复制粘贴最好。会持续更新
apicloudIt is used to synchronize vscode to develop the apicloud program for mobile phone wifi real machine synchronization不用数据线即可进行PC修改代码，真机调试.
veturAndprettierandstylusare used forvuecode formatting and code hints during development.
filesizeOn the left side of the bottom status bar, the current file size is displayed, which is useless
Live ServerQuickly start the local server, note that it is only valid for .html and .htm files. Right click on the html file and selectopen with Live Server.
屏幕阅读器优化, optional. This function is盲人阅读器an intimate option specially made by vscode, and it also has a certain effect on programmers (hahaha, can correct Chinese and English pronunciation)
For example:当你开启后，鼠标悬浮在桌面任何位置，语音朗读器都会朗读出来所在位置的内容. Once it is turned on in vscode, the bottom will display as shown in the figure. The specific settings are at the end of the text.
vscode plugin installation
Dracula Officialtheme (my favorite)Material Icon Themeicon themeChinese Language PackChinese Language PackGitLensDisplay the commit history of each line in the code fileGit HistoryCompare and view git historical versionsindent-rainbowHighlight indentation coloring, let your indentation be clear at a glanceTabnine AI- AI code completion plugin [Global]Code RunnerF5, run! 【Global】Image previewPicture preview 【Global】Color HighlightColor highlight [global]Regex PreviewerWatch the result while writing the regular expression [Global]Markdown Preview EnhancedMarkdown file preview [md file]Markdown All in OneMarkdown full-featured snippet [md file]koroFileHeaderGenerate file header remarks [md file]XML ToolsXML file formatting and highlighting [xml file]DotENVenv file highlight [xml file]BookmarksAdd bookmarks to code snippets for easy jumping [Global]Path IntellisensePath identification, it is very convenient when writing files to import addresses. Unfortunately: the path alias in the webpack project cannot be recognized [global]PrettierFormatting, the whole world is using Prettier to unify the style [partial]**
Bucket set! Install all plug-ins directly without interfering with each other.
In the vscode plugin list, Ctrl + left mouse button + click on the title will pop up the corresponding official introduction
front end
HTML CSS SupportQuickly write attributes in html/css files 【Supported Languages】JavaScript (ES6) code snippetsQuickly write ES6 code 【Supported languages】cssremAutomatically convert px in css to rem. No more calculators (recommended by the desert) [partial]Css PeekLocate class and id styles in html and css files. (When right-clicking the selector, select Go to Definition and Peek definition, unfortunately not available in vue) [html/css files ]npm IntellisenseIn import statements, npm modules are automatically populated. [js file]PrettierFormatting, the whole world is using Prettier to unify the style [partial]EslintJs grammar detection [global]TslintTypescript syntax detection [ts, js files]JSON to TSConvert json code to Ts code [global]VeturQuickly write Vue2 code [vue file]Vue 2 SnippetsQuickly create a new Vue2 page ( refer to the article ) [global]VolarQuickly write Vue3 (for Vue3, there is no need to install the first two plug-ins) code [vue file]SassCSS preprocessor, recognition extension of scss suffix file [vue file]language-stylusCSS preprocessor, recognition extension of styl suffix file [styl file]language-postcssPostCSS preprocessor **[styl file]**
python
PythonThe pain of tabs and spaces, everyone who has written python knows [py file]
Flutter
FlutterFlutter! YYDS! [dart file]Awesome Flutter SnippetsFlutter code snippet sketch [dart file]Built Value SnippetsCooperate withBuilt Valuequickly generate dart model [dart file]
other
Comment TranslateAutomatically translate English to Chinese [Global]View In BrowserQuickly open html files through the browser [partial]filesizeOn the left side of the bottom status bar, the current file size is displayed, and you can also click [Global]Better CommentsColorize the annotation content. Quick use: Enter /** in the editor , and then press the Tab key 【Global】REST ClientSimilar to postman, it simulates sending http requests directly in VScode, and debugging is available [Global]Live ServerQuickly start a local server [global]
The following plugins are: optional and not recommended for installation.
The following plug-ins will either lead to poor VS experience or cause shortcut key conflicts. If there is no relevant requirement, it is no longer recommended to install.
Sublime Text KeymapEnable the shortcut key configuration of sublimeText (old users of sublimeText learn to adapt to the shortcut keys of Vscode)Visual Studio IntelliCodeSupport AI for Python, Ts/Js /Java syntax. (This plugin is mainly used for AI development, so it supports Node. After installation, code prompts will be given in Js code writing. Those who do not develop AI do not need to install)Bracket Pair Colorizer2Each pair of brackets has a different color (too popular, vscode has built-in this feature)VS Code ES7 React/Redux/React-Native/JS snippetsQuickly write React (non-react projects, disabled) [js file]React Native ToolsSupport React Native project, quickly write es6 and jsx (non-react project, disabled) [js file]C/C++When running a React Native project, you need this [global] to view some files
{
// 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,
"editor.bracketPairColorization.enabled": 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会给出很多提示，在所有的提示选项中会默认选中一个，这一配置就是表示默认选中哪一项。
// 此项配置十分精妙，自己改改探索一下。
// 可选值如下：
// "editor.snippetSuggestions": "first" VScode将总是选中第一项
// "editor.snippetSuggestions": "recentlyUsed" （默认值）vscode将从代码提示中，预先选中最近使用过的项
// "editor.snippetSuggestions": "recentlyUsedByPrefix" （推介）vscode将从所有可用片段中，预先选中最近使用过的项
"editor.suggestSelection": "recentlyUsedByPrefix",
"editor.quickSuggestions": {
// 是否显示可能用到的示例代码.安装插件过多，建议选项也会非常多
"other": true,
"comments": true,
"strings": false
},
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
// 配置 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,
"**/.history": true,
"vite.config.ts.timestamp-*": true,
"**/pnpm-lock.yaml": 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,
/// 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规则 ,修改为你自己项目文件位置，或者直接删除
// "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
},
// css2rem插件: 书写css时，px单位自动提示是否转换为rem单位
// 此处根字体大小设置为100（默认为16）, 注意与你项目中rem数值保持一致
"cssrem.rootFontSize": 100,
// 多行注释合并
"commentTranslate.multiLineMerge": true,
// 注释采用简洁模式
"commentTranslate.hover.concise": true,
// VScode更新后，是否显示版本changeLog
"versionlens.suggestions.showPrereleasesOnStartup": true,
"liveServer.settings.donotShowInfoMsg": true,
// 解决Vue换行问题
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
},
},
"security.workspace.trust.untrustedFiles": "open",
"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.warnWhenEditingFilesOutsideWorkspace": true,
"dart.openDevTools": "flutter",
"dart.enableCompletionCommitCharacters": true,
"dart.lineLength": 120,
"dart.previewFlutterUiGuides": 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.jdt.ls.java.home 为刚刚安装的 openJDK11 的位置
// 3. 由于我只希望在Vcode中使用JDK11版本，在实际项目中的配置不变，所以配置 java.configuration.runtimes
"java.jdt.ls.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
}
]
}
Commonly used shortcut keys
- Terminal startup shortcut key:
ctrl + shift + C - Formatting shortcut key:
shirt + alt + F(shirt + alt + FWhen using to format, first execute the formatting rules in the editor settings, and then execute the plug-in rules such as local project eslint and tslint) - Automatically delete useless import references in the code and sort them:
shift + alt + o - Auto-fix code:
alt+Q(For example, Vue3 automatically introduces objects such as ref. Need to customize: File – Preferences – Keyboard Shortcuts – Input快速修复)
Other functions
1. Screen Reader
Support windows7 and above operating systems, not mac, as a small toy for practicing English listening.
First download and install the software, Nvda , required pass: he2m
After the software is installed, start it. The configuration item in vscodeeditor.quickSuggestionsdetermines whether to enable it.
2. Vue project, antfu code specification
-
In vscode, use eslint and prettier to format (seamlessly connect setting.json configuration)
-
In vscode, when Vue3 fails to import automatically, Ts Error appears (global installation
Typescript 4.8.3)
{
/// **Vue.js专用配置**
"javascript.preferences.autoImportFileExcludePatterns": [
"@vue/runtime-core",
"@vue/runtime-dom"
],
"typescript.preferences.autoImportFileExcludePatterns": [
"@vue/runtime-core",
"@vue/runtime-dom"
]
}
3. React project configuration
React project ( created with npx create-react-app my-app ), sometimes it is found that the eslint inspection rules do not take effect. At this time, in the current project, 2 additional plug-ins need to be installed.
npm install --save-dev eslint-plugin-html eslint-plugin-react
4. Plug-in shortcut key conflict
When too many plug-ins are installed, shortcut key conflicts will inevitably occur. In order to resolve the conflict, you need to open the shortcut key list, and search for the corresponding plug-in shortcut key according to the plug-in name. For example, I enter: emmet, aim at any shortcut key option, click the right mouse button, select to display the same key binding , and modify it to your favorite Just a shortcut key. (recommended to only make changes to conflicting ones)
文件 --> 首选项 --> 键盘快捷方式
5. Vscode domestic mirror fast download address
------ If the article is useful to you, thank you in the upper right corner >>> Like | Favorite<<<