vscode 前端最佳插件配置_vscode前端插件推荐

vscode最佳配置

最近更新时间： 2023.02.18 （Vscode v1.17）
vscode 配置文件内容在最后，可直接copy使用

配置详解

editor是针对 vscode 的全局主题设置，workbench是针对 vscode 的工作区主题设置
例如 tabSize：一个tab等于2个空格，行高为24px
例如 iconTheme（图标风格）：使用插件 vscode-great-icons （需搜索安装）

search.exclude 配置vscode中项目中的哪些目录被排除搜索,避免你每次搜索结果中都有一大堆无关内容

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修改代码，真机调试。

Vue - Official 和prettier以及stylus是用于Vue开发时的代码格式化, 代码提示.

filesize在底部状态栏左侧，显示当前文件大小，没啥用

Live Server快速启动本地服务器，注意只对 .html 和 .htm 文件有效。(对 html 文件点击鼠标右键，选择open with Live Server.)

屏幕阅读器优化, 可选项. 此功能是 vscode 专门配合盲人阅读器而做的贴心选项，对于程序员来说也有一定作用( 哈哈哈, 可以纠正中式英文发音)
例如：当你开启后，鼠标悬浮在桌面任何位置，语音朗读器都会朗读出来所在位置的内容。一旦在vscode中开启，那么底部会显示如图所示。具体设置在文尾。

vscode插件安装

通义灵码（阿里AI代码助手）
baidu comate(百度AI助手)
Dracula Official 主题（我的最爱）
Material Icon Theme 图标主题
Chinese Language Pack 中文语言包
GitLens 在代码文件显示每一行的提交历史
Git History 对比查看git历史版本
indent-rainbow 凸显缩进着色，让你的缩进一目了然
Tabnine AI - AI 代码完成插件 【全局】
Code Runner F5, 运行！ 【全局】
Image preview 图片预览 【全局】
Color Highlight 颜色高亮 【全局】
Regex Previewer 边写正则边看结果 【全局】
Markdown Preview Enhanced Markdown文件预览 【md文件】
Markdown All in One Markdown全功能snippet 【md文件】
koroFileHeader 生成文件头部备注 【md文件】
XML Tools XML文件格式化以及高亮 【xml文件】
DotENV env文件高亮 【xml文件】
Bookmarks 对代码片段添加书签，便于跳转 【全局】
Path Intellisense 路径识别,书写文件引入地址时很方便。遗憾: 对webpack项目中的路径别名无法识别 【全局】
Prettier 格式化，全世界都在使用Prettier来统一风格【局部】**

水桶套装！直接安装全部插件，插件互不干扰。

vscode插件列表中, Ctrl + 鼠标左键 + 点击标题 会弹出对应官方介绍

前端

HTML CSS Support 在html/css文件中快速书写属性 【Supported Languages】
JavaScript (ES6) code snippets 快速书写ES6代码 【Supported languages】
cssrem 将css中的px自动转换为rem.再也不用计算器（大漠推介） 【局部】
Css Peek 在html和css文件中定位class和id样式. （右键单击选择器时，选择 Go to Definition和 Peek definition，遗憾的是vue中不可用）【html/css文件】
npm Intellisense 在import语句中，自动填充npm模块。【js文件】
Prettier 格式化，全世界都在使用Prettier来统一风格 【局部】
Eslint Js 语法检测 【全局】
Tslint Typescript 语法检测 【ts，js文件】
JSON to TS 将json代码转变为Ts代码 【全局】
Vue - Official 快速书写 Vue 代码 【vue文件】
Vue 3 Snippets 快速新建一个 Vue 页面（参考文章） 【全局】
Sass CSS预处理器，scss后缀文件的识别扩展 【vue文件】
language-stylus CSS预处理器，styl后缀文件的识别扩展 【styl文件】
language-postcss PostCSS预处理器**【styl文件】**

python

Python tab与空格的痛苦，写过python的都知道 【py文件】

Flutter

Flutter Flutter ! YYDS! 【dart文件】
Awesome Flutter Snippets Flutter 代码片段速写 【dart文件】
Built Value Snippets 配合 Built Value 快速生成 dart 模型 【dart文件】

其他

Comment Translate 自动将英文翻译为中文 【全局】
View In Browser 迅速通过浏览器打开html文件 【局部】
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开发的人员，无需安装)
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,
  "editor.bracketPairColorization.enabled": true,
  "explorer.confirmDelete": false,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Dracula Soft",
  "workbench.colorCustomizations": {
   
    "editorIndentGuide.activeBackground1": "#ff0000", // 设置guide线高亮颜色,可以改为自己喜欢的颜色，
    "editor.selectionBackground": "#f7ecec", // 设置编辑器中选中文本的背景颜色
    "statusBar.background": "#11b6c2", // 设置状态栏的背景颜色
    "statusBar.foreground": "#ffffff", // 设置状态栏的前景颜色（文本颜色）
    "statusBarItem.hoverBackground": "#c211aa", // 设置状态栏项在悬停时的背景颜色
    "tab.activeBackground": "#67809f", // 设置活动标签页的背景颜色
    "tab.activeModifiedBorder": "#f62459", // 设置活动且已修改的标签页的边框颜色
    "tab.activeBorder": "#ffffff", // 设置活动标签页的边框颜色
    "tab.hoverBackground": "#0097A7" // 设置标签页在悬停时的背景颜色
  },
  "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会给出很多提示，在所有的提示选项中会默认选中一个，这一配置就是表示默认选中哪一项。此项配置十分精妙，自己改改探索一下。
  // 可选值如下：
  // "recentlyUsed" （默认值）vscode将从代码提示中，预先选中最近使用过的项
  // "first" ： vscode将总是选中第一项
  // "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" 
    // 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,
  /// 关闭编辑器自带保存时格式化功能
  "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,
  "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": "off",
    // 在文件底部添加新代码行时，强制所有文件都有一行空格。
    "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
    }
  ]
}

常用快捷键

终端启动快捷键: ctrl + shift + C
格式化快捷键: shirt + alt + F （使用 shirt + alt + F 进行格式化时，先执行编辑器设置中的格式化规则，然后执行本地项目 eslint 和 tslint 等插件规则）
自动删除代码中无用的 import 引用,并排序: shift + alt + o
自动修复代码: alt+Q (比如Vue3自动引入 ref 等对象。需要自定义：文件 – 首选项 – 键盘快捷方式 – 输入快速修复)

其他功能

1. Screen Reader（屏幕阅读器）

支持windows7以上操作系统，不支持mac，作为练习英语听力的小玩具.

首先下载并安装软件，Nvda, 需要的pass: he2m
安装完成此软件后启动。在vscode中配置项editor.quickSuggestions决定是否开启.

2. vue 项目，antfu 代码规范

vscode中，使用 eslint 和 prettier 格式化(无缝衔接setting.json配置)
vscode中，Vue3自动自动导入失败时，出现Ts Error(全局安装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 项目配置

react项目（使用 npx create-react-app my-app 创建），有时会发现eslint检验规则不生效，此时在当前项目，需要额外安装2个插件。

 npm install --save-dev eslint-plugin-html  eslint-plugin-react

4. 插件快捷键冲突

插件安装过多时，不可避免会出现快捷键冲突。为了解决冲突，需要打开快捷键清单，根据插件名称搜索对应插件快捷键，比如我输入: emmet, 对准任意一条快捷键选项，点击鼠标右键，选择显示相同的按键绑定,修改为自己喜欢的快捷键即可。（建议仅对冲突的进行更改）文件 --> 首选项 --> 键盘快捷方式

5.vscode国内镜像加速下载地址

6. vscode在系统中默认全局配置文件位置

windows: C:\Users\Administrator\AppData\Roaming\Code\User\settings.json
macOS: ~/Library/Application Support/Code/User/settings.json`

vscode配置历史版本

------ 如果文章对你有用，感谢右上角 >>>点赞 | 收藏 <<<

上一篇： React Native开发环境搭建，VS Code运行项目步骤详解

下一篇：跨平台移动应用开发：React Native vs. Flutter

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/3734.html

vscode最佳配置

配置详解

vscode插件安装

常用快捷键

其他功能

1. Screen Reader（屏幕阅读器）

2. vue 项目，antfu 代码规范

3. react 项目配置

4. 插件快捷键冲突

5.vscode国内镜像加速下载地址

6. vscode在系统中默认全局配置文件位置

相关文章：