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（需搜索安装）
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持续爆炸
{ // VScode主题配置
"editor.tabSize": 2,
"editor.lineHeight": 24,
"derLineHighlight": "none",
"derWhitespace": "none",
"editor.fontFamily": "Consolas",
"editor.fontSize": 15,
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.snippetSuggestions": "top",
// 使⽤vscode的⾃动格式化时，有时会把⼀⾏过长的代码折⾏。400表⽰400个字符处折⾏
"editor.wordWrapColumn": 400,
"editor.wordWrap": "off",
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": false
},
"deActionsOnSave": {
"anizeImport": true
},
// 保存⽂件时，⾃动格式化
"editor.formatOnSave": false,
// 格式化粘贴到⽂件内的内容
"editor.formatOnPaste": false,
"terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\",
"abled": false,
"abled": "always",
"perimentalDecorators": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"workbench.iconTheme": "vscode-great-icons",
"workbench.startupEditor": "newUntitledFile",
"lorTheme": "Dracula Soft",
"lorCustomizations": {
// 设置guide线⾼亮颜⾊
"editorIndentGuide.activeBackground": "#ff0000"
},
// css2rem插件配置：设置书写css时，px⾃动提⽰转换为rem的根字体⼤⼩，默认值为16
"FontSize":100,
// 启⽤/禁⽤导航路径
"abled": true,
// 通过默认浏览器打开html⽂件
"open-in-browser.default": "chrome",
// VScode进⾏⽂件搜索时，不搜索这些区域。注意：vs已经贴⼼的默认设置了 node_modules 和 bower_components ⽂件夹
"lude": {
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true,
"**/dist": true,
"**/build": true,
},
// 配置⽂件关联
// ⽐如⼩程序中的 .wxss 这种⽂件，会把它作为css⽂件来处理，提供对应的css的语法提⽰，css的格式化等等。
"files.associations": {
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.ts": "typescript",
"*.vue": "vue",
"*.dart": "dart"
},
// vscode已经内置了emmet。配置emmet是否启⽤tab展开缩写
// 这⼀设置最⼤作⽤是：当输⼊的⽂本不属于Emmet定义的缩写规则时，依然允许使⽤Tab键进⾏缩进。此时会提⽰我⾃定义的缩写语句，以及各插件⾃定义的缩写语句.  "iggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
// 配置emmet对哪种⽂件类型⽀持
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"xml": {
"attr_quotes": "single"
}
},
// 在 react 的jsx中添加对emmet的⽀持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact",
"wxml": "html"
},
// 格式化快捷键 shirt+alt+F，有时可能需要多按⼏次
// 因为使⽤ shirt+alt+F进⾏格式化时，先执⾏编辑器的格式化规则，然后才会按照eslint和tslit这样的其他插件去格式化。
// 是否开启eslint检测
"able": true,
// 是否启⽤根据eslint配置⽂件。⽂件保存时，根据配置⽂件进⾏格式化
"eslint.autoFixOnSave": true,
// eslint配置⽂件 ，修改为你⾃⼰电脑上的⽂件位置，或者直接删除
"eslint.options": {
"configFile": "D:/worksapce/youxiang-mobile-master/.eslintrc.js",
"plugins": ["html"]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
"typescript",
"typescriptreact"
],
// 安装了tslint插件后，是否启⽤该插件
"able": false,
// git是否启⽤⾃动拉取
"git.autofetch": true,
// 配置gitlen中git提交历史记录的信息显⽰情况
"ssages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressShowKeyBindingsNotice": true,
"suppressUpdateNotice": true,
"suppressWelcomeNotice": false
},
// 是否格式化python⽂件
"abled": false,
// 设置端⼝。开启apicloud在vscode中的wifi真机同步
"apicloud.port": "23450",
// 设置apicloud在vscode中的wifi真机同步根⽬录，默认可不设置
"apicloud.subdirectories": "/apicloudproject",
// 这个设置是全局的，不可为每种语⾔配置。
// 断点调试时，遇到断点，⾃动显⽰调试视图。
"debug.openDebug": "openOnDebugBreak",
// 专为dart语⾔配置
"[dart]": {
// snippet ：代码⽚段
/
/ 保存⽂件时，是否⾃动格式化代码，
"editor.formatOnSave": true,
// 当你输⼊特定字符时，是否⾃动格式化代码，(⽐如输⼊ `;` 和 `}`).
"editor.formatOnType": true,
// 在80个字符处画⼀条引导线，这个范围内的dart代码将被格式化。
"editor.rulers": [80],
// 禁⽤与所选内容匹配的单词的内置突出显⽰。如果不这样做，所选⽂本的所有实例都将突出显⽰，从⽽影响Dart突出显⽰所选变量的精确引⽤的能⼒。
"editor.selectionHighlight": false,
// 默认情况下，当处于“代码⽚段模式”（在插⼊的代码中编辑占位符）时，VS会防⽌snippets弹出打开。
// 如果设置为“false”，则表⽰允许完成操作打开，就像不在代码段占位符中
"editor.suggest.snippetsPreventQuickSuggestions": true,
// coding时，VScode会给我们给多提⽰，在所有的提⽰选项中会默认选中第⼀个，这⼀配置就是表⽰默认选中哪⼀项。
// 默认值为："first"，表⽰VScode将总是选中第⼀项
// （推介） "recentlyUsed" 表⽰vs code将从代码提⽰中，预先选中最近使⽤过的项，
"editor.suggestSelection": "recentlyUsedByPrefix",
// 允许使⽤按<tab>速写代码⽚段，例如，输⼊“for”时，即使完成列表不可见。
"editor.tabCompletion": "onlySnippets",
// 默认情况下，当前的语⾔没有代码⽚段提⽰时，VS Code将使⽤当前⽂件中的你⾃⼰写过的单词来显⽰代码⽚段提⽰。
// 这导致代码完成在编辑注释和字符串时建议单词。此设置将阻⽌这种情况
// 对于dart来说最好关闭，对于html和css建议开启
"editor.wordBasedSuggestions": false,
// 在⽂件底部添加新代码⾏时，强制所有⽂件都有⼀⾏空格。
"files.insertFinalNewline": true,
}vscode代码规范
}
其他功能
在⽂件头添加⽤户作者，逼格满满，效果如图
⽂件 > ⾸选项 >⽤户代码⽚段>新建全局代码⽚段，粘贴保存。
测试⽅法：新建⽂件，输⼊内容author即可
{
"⽤户信息": {
// prefix: 在编辑器中输⼊ author 时，编辑器建议中会显⽰该⽚段。
"prefix": "author",
/
/ TM_FILENAME_BASE: 当前⽂件名
// CURRENT_YEAR：年（4位数） CURRENT_YEAR_SHORT：年（2位数） CURRENT_MONTH：⽉ CURRENT_DATE：⽇
// CURRENT_HOUR：⼩时 CURRENT_MINUTE ：分钟 CURRENT_SECOND：秒
"body": [
"/*",
"* @module ${TM_FILENAME_BASE}",
"* @author : ifredom",
"* @description : ifredom是⼀位FD.",
"* @since : 创建时间 ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",  "*/",
""
],
// 描述说明，在⽚段说明中会显⽰此字段的⽂本内容。
"description": "Insert description."
}
}
Screen Reader（屏幕阅读器）
只⽀持windows7以上操作系统，不⽀持mac.
可⽤可不⽤，作为练习英语听⼒的⼩玩具.
⾸先下载并安装软件，Nvda, 需要的pass: he2m
安装完成此软件后启动。在vscode中配置项editor.quickSuggestions决定是否开启.
vue项⽬，标准格式化规范
到此这篇关于vscode 前端最佳配置⼩结的⽂章就介绍到这了，更多相关vscode 前端最佳配置内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！