vscode 前端最佳配置小结

vscode最佳配置

添加如何设置屏幕阅读器优化 添加对 Flutter（Dart）的语法支持，配置在最底部 最近一次更新时间： 2020.03.22 （vscode V1.39.2）

配置说明详解

vscode配置文件内容在最后，已附上。可直接copy使用 vue项目，标准格式化规范的eslint文件附在末尾

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

workbench是针对vscode的主题设置

例如 iconTheme（ 图标风格）：使用插件 vscode-great-icons （需搜索安装）

例如 colorTheme（代码颜色风格）：使用插件 One Dark Pro Vivid（需搜索安装）

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 是用于代码格式化代码时，选择用自己的格式化规则或者标准规则，prettier规则等

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

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

Sublime Text Keymap很多FD习惯使用sublime的一套快捷键。

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

vscode插件安装

Atom One Dark Theme 主题 VSCode Great Icons 图标主题 Beautify 美化vscode代码 Bracket Pair Colorizer 每一对括号用不同颜色区别 （括号强迫症必备） indent-rainbow 凸显缩进，让你的缩进一目了然 Prettier 格式化，使用标准风格，快捷键 alt+shift +F EditorConfig for VS Code vscode的配置文件 cssrem 将css中的px自动转换为rem.再也不用计算器了（大漠大神推介） Code Runner node，python等代码不必开命令行即可运行 Eslint 语法检测 GitLens 在代码中显示每一行代码的提交历史 HTML CSS Support vscode对html，css文件支持，便于你快速书写属性 Vetur 添加对.vue后缀文件的快速书写支持。 Vue 2 Snippets 快速新建vue页面（参考我另一篇文章） React Native Tools 添加对 React Native项目的支持，快速书写es6以及jsx C/C++ 运行React Native项目时，有些文件的查看需要这个 View In Browser 迅速通过浏览器打开html文件 Sublime Text Keymap 启动sublimeText的快捷键配置。vscode上面自有一套快捷键设定，个人习惯sublime快捷键 markdownlint 书写md文件的预览插件 Path Intellisense 路径识别苦战，比如书写图片路径时。遗憾就是，对webpack项目中的路径别名无法扩展 npm Intellisense 在import语句中，自动填充npm模块。 language-stylus CSS预处理器，styl后缀文件的识别扩展 Settings Sync 用于同步vscode配置，多台电脑一份配置（相对而言配置复杂，可不安装） filesize 在底部状态栏左侧，显示当前文件大小，还可以点击哟 Document This 快速生成注释，注意只对类和函数有效。快捷键 Ctrl+Alt+D Live Server 快速启动一个本地服务器 Python 添加对.py文件的支持，毕竟tab与空格的痛苦，写过python的都知道 Flutter 2018是 Flutter 最火爆的一年，2019持续爆炸

 1/3    1 2 3 下一页 尾页