2020最新版vscode格式化代码的详细教程
这篇关于vscode格式化配置研究初稿，具体内容如下所⽰：
前⾔
之前⽤vscode进⾏格式化的时候都是在百度和⾕歌上搜“vscode格式化代码”然后直接copy别⼈。细节的配置⼀直没去看过。
但是最近⼀段时间开发项⽬的时候发现和同组的提交代码的时候格式总是不统⼀。于是这两天专门看了看插件的官⽅⽂档，研究研究。
今天初步有⼀点研究结果了。会配置⼀点点了。写此博客与⼤家共同参考。不⾜的地⽅欢迎⼤家补充，错误的地⽅欢迎⼤家纠错。
⽂章内容包括两个部分：⼀是理论，⼆是我的settings.json的配置。
理论
参考⽂章：
代码格式化⽬的：
代码格式化的⽬的⼀是为了提⾼代码可读性，⽅便⾃⼰编码，⽅便团队开发；⼆是⽅便出和修正因为格式导致的错误。
在团队开发。因为每个⼈的编码习惯不同，如
缩进是2还是4。
代码结尾是否加分号，⽤单引号还是⽤双引号。
函数和后⾯的括号之间是否加个空格。
等等
统⼀代码格式，让每个⼈开发更顺利。
为了完成第⼀个⽬的，格式化插件有vetur、prettier等针对⽂件进⾏格式化的插件；
为了完成第⼆个⽬的，格式化插件有ESlint等对⽂件进⾏代码检验的插件。
代码格式化的注意事项：
插件作⽤
⾸先明⽩格式化插件分别侧重格式化哪些⽂件，因为不同的⽂件有不同的格式规范。
prettyhtml格式化HTML；
prettier格式化css/less/scss/postcss/ts；
stylus-supremacy格式化stylus；
vscode⾃带格式化插件格式化js；
vetur格式化.vue⽂件；让不同块使⽤不同的格式化⽅案
ESlint：新版的ESlint⽀持了对.vue⽂件的校验。
符合代码检验
然后注意让格式化的代码符号ESlint代码检验。
格式化代码最重要的是两点，⼀点是⽤格式化插件格式化对应的⽂件；另⼀点是让格式化后的代码能通过代码检验⼯具。
举个例⼦。
Prettier插件不⽀持在函数名后⾯加上括号。这点和ESlint冲突了。所以js的格式化不能使⽤prettier插件格式化，⽽是使⽤vscode⾃带的js格式化功能来格式化。否则ESlint就是报错，简直烦死强迫症。
插件更新
最后要注意插件的是插件不断更新的，所以⽹上直接copy的格式化代码会各种不兼容。
如vscode 的ESLint插件在某个版本已经移除了"eslint.validate"这个配置选项，⽽⽹上很多教程都是使⽤的这个。
在新版的ESLint中已经⽀持了对*.vue⽂件的校验，所以⽆需再进⾏这项配置了，只需要添加⼀个保存时⾃动修复 ESLint 错误的功能就⾏了。
代码格式化插件的官⽅⽂档：
语⾔介绍
pug：。pug是⼀款专门为node.js平台开发的HTML模块引擎。
less：。less是⼀门CSS预处理语⾔。
scss：。scss（sass）是世界上最成熟、稳定强⼤的专业级CSS预处理语⾔。
postcss：。postcss是使⽤js插件来转换CSS的⼯具。
stylus：。stylus是node.js平台上的CSS预处理框架。
插件介绍
vetur：。代码⾼亮、emmet语法⽀持、语法错误校验检查、代码提醒、格式化vue。
vetur集成了prettier，让.vue⽂件中不同的块使⽤不同的格式化⽅案，template标签调⽤ html 格式化⼯具，script标签调⽤ JavaScript 格式化⼯具，style标签使⽤style格式化⼯具。
ESlint：。代码检验。
prettyhtml：。为vue或纯HTML模板等提供通⽤格式化的⼯具。
pretties：。代码格式化⼯具，能够解析代码，使⽤⽤户设定的规则格式化规范的代码。
stylus-supremacy：。⽤于格式化stylus⽂件的node.js模块。
我的settings.json⽂件
{
/*格式化⽂件对应插件：
主要是两步，⼀步是⽤格式化插件格式化对应的⽂件；
另⼀步让格式化后的代码能通过代码检验⼯具。
prettyhtml格式化HTML；prettier格式化css/less/scss/postcss/ts；
stylus-supremacy格式化stylus；
vscode⾃带格式化插件格式化js；
vetur格式化.vue⽂件；
ESlint进⾏代码检验。
*/
/
*格式化思路和注意事项。
注意格式化的代码能符合ESlint代码检验。
1.⽤vetur设置默认格式化⼯具。格式化.vue⽂件
2.⽤ESlint设置保存时修复ESlint错误的功能。
3.⽤prettier格式化css；去除语法结尾的分号，使⽤单引号替换双引号。
4.保存时⾃动格式化。
*/
// 默认使⽤prettier格式化⽀持的⽂件
"editor.defaultFormatter": "esbenp.prettier-vscode",
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
// "vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier",
"vetur.format.defaultFormatter.sass": "sass-formatter",
"open-in-browser.default": "Chrome",
// 将vetur的js格式化⼯具指定为vscode⾃带的
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 移除js语句的分号
"javascript.format.semicolons": "remove",
// 在函数名后⾯加上括号，类似这种形式 foo () {}
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// eslint配置项，保存时⾃动修复错误。
"deActionsOnSave": {
"source.fixAll": true
},
// 指定 *.vue ⽂件的格式化⼯具为vetur
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
/
/ 指定 *.js ⽂件的格式化⼯具为vscode⾃带
"[javascript]": {
"editor.defaultFormatter": "pescript-language-features"
},
"vetur.format.defaultFormatterOptions": {
"JS-beautify-HTML": {
// JS-beautify-HTML的设置在这⾥
"wrap_attributes": "force-aligned"
},
" prettyhtml": {
"printWidth'": 100, // 每⼀⾏不超过100个字符
"singleQuote": false, // 不⽤单引号
"wrapAttributes": false,
"sortAttributes": true
},
"prettier": {
// 去掉代码结尾的分号
"semi": false, //不加分号
"singleQuote": true, //⽤单引号
// #让prettier使⽤eslint的代码格式进⾏校验
"eslintIntegration": true,
"arrowParens": "always"
}
},
// vscode默认启⽤了根据⽂件类型⾃动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
// 保存时⾃动格式化代码
"editor.formatOnSave": true,
//可选项。stylus的格式化配置以及sass格式化配置。
// 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertBraces": false, // 是否插⼊⼤括号 "stylusSupremacy.insertColons": false, // 是否插⼊冒号 "stylusSupremacy.insertSemicolons": false, // 是否插⼊分号 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换⾏ "st
ylusSupremacy.insertNewLineAroundBlocks": false,
// 启⽤调试模式。
"sass.format.debug": false,
// 删除空格
"sass.format.deleteEmptyRows": true,
// 删除最后⼀个空格。
"sass.format.deleteWhitespace": true,
// 将 scss / css 转换为 sass。
"vert": true,
// 如果属性：值为true，则始终设置为1.
"sass.format.setPropertySpace": true
/
*格式化插件：
//vetur：代码⾼亮、emmet语法⽀持、语法错误校验检查、代码提醒、格式化vue。vetur集成了prettier，让.vue⽂件中不同的块使⽤不同的格式化⽅案，
<template> 调⽤ html 格式化⼯具，
<script> 调⽤ JavaScript 格式化⼯具，
<style> 使⽤style格式化⼯具。
//ESlint：新版的ESlint⽀持了对.vue⽂件的校验。
//prettyhtml：为纯HTML模板等提供通⽤格式化的⼯具。
//prettier：格式化⼯具，⽤于css/less/scss/postcss/ts
//stylus-supremacy：⽤于格式化stylus⽂件的node.js模块。
//js的格式化⼯具⽤vscode⾃带的。
Prettier不⽀持在函数名后⾯加上括号。这点和ESlint冲突了。
//EditorConfig：主要是⽤于让 vscode ⽀持.editorconfig ⽂件。
.editorconfig ⽂件中的设置⽤于在基本代码库中维持⼀致的编码风格和设置，
例如缩进样式、选项卡宽度、⾏尾字符以及编码等。
EditorConfig 是让代码创建前保持规范，
Prettier 是让代码保存后保持规范
*/
}
总结
vscode代码规范到此这篇关于2020最新版vscode格式化代码的详细教程的⽂章就介绍到这了，更多相关vscode格式化代码内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！