vscode 前端最佳插件配置开发者社区

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

vscode 前端最佳插件配置

	 "files.associations": { 
	        "*.vue": "html",
	        "*.wxss": "css"
	  }

{ 
  // 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": [
    // 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响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,
}

vscode 前端最佳插件配置

vscode 前端最佳插件配置

vscode最佳配置

配置详解

vscode插件安装

其他功能

1. Screen Reader（屏幕阅读器）