vscode 前端最佳插件配置

2021-02-25 16:13 845人阅读评论(0)

vscode最佳配置

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

配置详解

editor是针对vscode的风格设置
例如 tabSize：一个tab等于2个空格，行高为24px

workbench是针对vscode的主题设置
例如 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"
	  }

sync是用于同步vscode配置使用，不用每一次换个电脑都要复制一次配置，避免丢失或者改动，保持一致！收藏文章/复制粘贴最好。会持续更新

apicloud 是用于同步 vscode 开发apicloud程序时进行手机wifi真机同步使用，不用数据线即可调试。

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

eslint/tslint 是用于代码格式化代码时，可以配合prettier规则使用

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

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

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

vscode插件安装

Dracula Official 主题
Atom One Dark Theme 主题
Material Icon Theme 图标主题
Bracket Pair Colorizer 每一对括号不同颜色（括号强迫症必备）
indent-rainbow 凸显缩进着色，让你的缩进一目了然
EditorConfig for VS Code vscode的风格配置文件
GitLens 在代码中显示每一行代码的提交历史
Chinese Language Pack 中文语言包

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

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

Auto Rename Tag - 自动重命名配对的HTML / XML标记 【全局】
Bookmarks 对代码片段添加书签，便于跳转 【全局】
Code Runner node，python等代码不必开命令行即可运行 【全局】
Image preview 图片预览 【全局】
Color Highlight 颜色高亮 【全局】
Comment Translate 自动将英文翻译为中文 【全局】
HTML CSS Support 便于在html/css文件中快速书写属性 【 Supported Languages】
JavaScript (ES6) code snippets 快速书写ES6代码 【Supported languages】
cssrem 将css中的px自动转换为rem.再也不用计算器（大漠推介） 【局部】
Prettier 格式化，使用Prettier标准风格【局部】**
Eslint Js 语法检测 【全局】
Tslint Typescript 语法检测 【ts，js文件】
TypeScript Hero 快速书写Ts代码 【ts文件】
JSON to TS 将json代码转变为Ts代码 【全局】
Vetur 快速书写Vue代码 【vue文件】
Vue 2 Snippets 快速新建一个vue页面（参考文章） 【全局】
markdownlint md文件预览 【md文件】
Markdown All in One md文件格式化 【md文件】
Babel JavaScript Js文件转译 【js文件】
VS Code ES7 React/Redux/React-Native/JS snippets 快速书写React(非react项目，禁用) 【js文件】
React Native Tools 支持React Native项目，快速书写 es6 及 jsx 【js文件】
C/C++ 运行React Native项目时，有些文件的查看需要这个 【全局】
Python tab与空格的痛苦，写过python的都知道 【py文件】
XML Tools XML文件格式化高亮**【xml文件】**
Flutter 2018是 Flutter 最火爆的一年，2020生态繁荣发展中 【dart文件】
Awesome Flutter Snippets flutter 代码片段速写 【dart文件】
Built Value Snippets 配合Built Value快速生成模型 【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-stylus CSS预处理器，styl后缀文件的识别扩展 【styl文件】
filesize 在底部状态栏左侧，显示当前文件大小，还可以点击哟 【全局】
Better Comments 对注释内容着色。快捷方式：编辑器内输入 //*, 按Tab键 【全局】
Live Server 快速启动一个本地服务器 【全局】

以下插件为：可选以及不推介安装。
以下插件要么会导致VS体验变差，要么会导致快捷键冲突，如果没有相关需求，不再建议安装。

Sublime Text Keymap 启动sublimeText的快捷键配置 (学着去适应Vscode的快捷键)
Visual Studio IntelliCode 支持 AI for Python,Ts/Js /Java 语法。(此插件主要用于AI开发，因此支持Node。安装之后，在Js代码书写中会给出AI提示。不进行AI开发的人员，无需安装)
Settings Sync 用于同步vscode配置，多台电脑一份配置（相对而言配置复杂）

{
   
  // 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线高亮颜色,可以改为自己喜欢的颜色
  },
  "editor.snippetSuggestions": "top", // 代码提示。许多插件都有代码提示，代码缩写提示优先显示在最上方
  // 代码提示选中哪一项。coding时，VScode会给出很多提示，在所有的提示选项中会默认选中一个，这一配置就是表示默认选中哪一项。
  // 此项配置十分精妙，自己改改探索一下。
  // "first"，表示VScode将总是选中第一项
  // "recentlyUsed" （默认值）表示vs code将从代码提示中，预先选中最近使用过的项，
  // "recentlyUsedByPrefix" （推介）表示vs code将从代码提示中，预先选中最近使用过的项，
  "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,
  // 设置终端的命令工具，比如我用到了 cmder，那么可以把这里的地址改为电脑cmder的安装位置
  // 推介终端启动快捷键:  ctrl + shift + C
  "terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "workbench.editor.limit.enabled": true, // 是否限制每一个VSCODE窗体内显示的编辑器窗体数量（默认为关闭）。
  "workbench.editor.limit.perEditorGroup": true, // 是对打开的所有VSCODE窗体进行限制还是只对当前VSCODE窗体限制
  "workbench.editor.limit.value": 8, // 打开的编辑器的最大数量（默认为10个）
  "javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或者修改文件名时，是否自动更新引用到自此文件的所有文件。
  "[json]": {
   
    // 对json文件，使用 JSON语言功能 进行格式化
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
   
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[html]": {
   
    // 对html文件，使用 vscode.html-language-features(vscode内置规则) 进行格式化,不要使用 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"
    // 对 vue 文件，使用 prettier（格式化规则） + eslint（校验） 进行格式化，也可以选择 vetur 插件，或者单独选择prettier不加eslint
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
   
    // 对md文件，使用 Prettier 进行格式化
    "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,
  },
  // 配置文件关联
  "files.associations": {
   
    // 比如小程序中的 .wxss 这种文件，会把它作为css文件来处理，提供对应的css的语法提示，css的格式化等。
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript",
    "*.ts": "typescript",
    "*.vue": "vue",
    "*.dart": "dart"
  },
  // vscode已经内置了emmet。配置emmet是否启用tab展开缩写
  // 这一设置最大作用是：当输入的文本不属于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   删除代码中无用的文件引用: shift + alt + o
  // 使用 shirt + alt + F 进行格式化时，先执行编辑器的格式化规则，然后执行 eslint 和 tslint 等其他插件格式化规则。
  // prettier 可用格式化规则配置
  // "prettier.tabWidth": 2, // 一个tab的宽度
  // "prettier.singleQuote": false, // 是否使用单引号
  // "prettier.semi": true, // 句末封号
  // "prettier.insertPragma": false,
  // "prettier.trailingComma": "none",
  // "prettier.arrowParens": "always",
  // "prettier.printWidth": 200,
  "editor.codeActionsOnSave": {
   
    "source.organizeImport": true,
    "source.fixAll": false, // 对所有文件，保存时自动格式化
    "source.fixAll.eslint": true, // 更细. 在文件保存时，eslint规则生效。此配置会影响 eslint.format.enable
    "source.fixAll.tslint": false, // 更细. 在文件保存时，tslint规则生效。 此配置会影响 typescript.validate.enable
    "source.fixAll.stylelint": false // 更细. 在文件保存时，stylelint样式规则生效
  },
  // 是否开启 tslint代码规范检测 (与eslint 选择开启一种即可)
  "typescript.validate.enable": false,
  "eslint.format.enable": true, 
  "eslint.options": {
   
    // eslint配置文件 ,修改为你自己电脑上的文件位置，或者直接删除
    // 建议专门创建一个配置文件.eslintrc.js放在指定位置，所有项目均使用此配置文件，避免每一个项目都创建一个
    // "configFile": "D:/worksapce/vue-project/.eslintrc.js",
    "plugins": [
      "html"
    ]
  },
  "eslint.validate": [
    // eslint规则对以下几种后缀文件生效. 默认为["javascript", "javascriptreact"]
    "javascript",
    "javascriptreact",
    "html",
    "typescript",
    "typescriptreact"
  ],
  "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文件
  "python.linting.enabled": false,
  "minapp-vscode.disableAutoConfig": true,
  /// **apicloud开发专用配置** 设置端口。开启apicloud在vscode中的wifi真机同步
  "apicloud.port": "23450",
  "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.debugExternalLibraries": true,
  "dart.debugSdkLibraries": true,
  "[dart]": {
   
    // 保存文件时，是否自动格式化代码，
    "editor.formatOnSave": true,
    // 当你输入特定字符时，是否自动格式化代码，(比如输入 `;` 和 `}`).
    "editor.formatOnType": true,
    // 在80个字符处画一条引导线，这个范围内的dart代码将被格式化。
    "editor.rulers": [
      80
    ],
    // 禁用与所选内容匹配的单词的内置突出显示。如果不这样做，所选文本的所有实例都将突出显示，从而影响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版本为 1.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,
  "versionlens.suggestions.showPrereleasesOnStartup": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "vetur.ignoreProjectWarning": true
}

其他功能

1. 作者注释信息

在文件头添加用户作者，逼格满满，效果如图

文件 > 首选项 > 用户片段 > 新建全局代码片段 > 输入命名author，粘贴保存。
测试方法：新建文件，输入内容author即可

{
   
	"用户信息": {
   
		// prefix: 在编辑器中输入的此内容时，在编辑器建议中会显示该片段。
		"prefix": "author",
		// TM_FILENAME_BASE : 当前文件名
		// CURRENT_YEAR ： 年（4位数）  CURRENT_YEAR_SHORT：年（2位数）  CURRENT_MONTH：月  CURRENT_DATE：日 
		// CURRENT_HOUR ：小时  CURRENT_MINUTE ：分钟 CURRENT_SECOND：秒
		"body": [
			"/**",
			"* 用户信息",
			"* @param ${TM_FILENAME_BASE}",
			"* ! author: ifredom",
			"* ? description: ifredom是一位FD.",
			"* TODO: since: 创建时间  ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"**/",
			""
		],
		// 描述说明，在片段说明中会显示此字段的文本内容。
		"description": "Insert description."
	}
}

2. Screen Reader（屏幕阅读器）

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

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

3. vue项目，格式化规范 .eslintrc.js

4. react项目额外配置

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

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

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

要么删除此项配置，要么配置为你自己的校验规则地址

  "eslint.options": {
   
    "configFile": "D:/worksapce/my-app/.eslintrc.js",
  }

5. 插件快捷键冲突问题

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

文件 --> 首选项 --> 键盘快捷方式

历史版本

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

转载：https://blog.csdn.net/win7583362/article/details/79315055

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

vscode 前端最佳插件配置

vscode最佳配置

配置详解

vscode插件安装

其他功能

1. 作者注释信息

2. Screen Reader（屏幕阅读器）

3. vue项目，格式化规范 .eslintrc.js

4. react项目额外配置

5. 插件快捷键冲突问题

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场