【小知识】VScode格式化代码配置及插件

VScode格式化代码配置及插件

学会使用扩展和配置，能让你的vs code生产效率提高百分之二十 ——鲁迅

打开setting（新版vscode打开方式2019版）

格式化的快捷键

• Windows：Shift + Alt + F
• Mac： Shift + Option + F
• Ubuntu： Ctrl + Shift + I

配置在手，天下我有

{ 
    // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": true, // prettier 设置语句末尾不加分号 "prettier.semi": false, // prettier 设置强制单引号 "prettier.singleQuote": true, // 选择 vue 文件中 template 的格式化工具 "vetur.format.defaultFormatter.html": "prettyhtml", // 显示 markdown 中英文切换时产生的特殊字符 "editor.renderControlCharacters": true, // 设置 eslint 保存时自动修复 "eslint.autoFixOnSave": true, // eslint 检测文件类型 "eslint.validate": [ "javascript", "javascriptreact", { 
    "language": "html", "autoFix": true }, { 
    "language": "vue", "autoFix": true } ], // vetur 的自定义设置 "vetur.format.defaultFormatterOptions": { 
    "prettier": { 
    "singleQuote": true, "semi": false } } } 

浅说一下各个插件

ESlint： javascript代码检测工具，可以配置每次保存时格式化js，但每次保存只格式化一点点，你得连续按住Ctrl+S好几次,才格式化好

Prettier – Code formatter： 只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

vetur： 可以格式化html、标准css（有分号 、大括号的那种）、标准js（有分号 、双引号的那种）、vue文件，像这样

Manta’s Stylus Supremacy： 格式化stylus的插件（不用就不装），因为vetur会把css格式化有分号 、大括号的那种，此插件会把css格式化成stylus风格，像这样

Beautify
打开要格式化的文件 —> F1 —> Beautify file —> 选择你要格式化的代码类型

然后选择需要格式化的类型

汇总一下一些插件之间的小问题

① Vetur 对模版HTML代码没有格式化缩进
vscode 对 vue 的支持也是很棒的。对于 vue 的格式化，我们用到了 Vetur 插件，Vetur 插件的格式化大多也是直接用的 prettier 规范，但我们会发现Vetur 对模版HTML代码没有格式化缩进，可以配置下面这个：
注意安装这个插件后，可以在设置中看到如下的内容：

然后在后面在配置一下这个就可以让HTML可以格式化缩进啦：

"vetur.format.defaultFormatter.html": "prettier" 

② vetur + Manta’s Stylus Supremacy
解决安装了vetur，又想安装Manta’s Stylus Supremacy时去掉vetur添加的分号大括号时可以这样配置：

 // 格式化stylus, 需安装Manta's Stylus Supremacy插件 "stylusSupremacy.insertColons": false, // 是否插入冒号 "stylusSupremacy.insertSemicolons": false, // 是否插入分好 "stylusSupremacy.insertBraces": false, // 是否插入大括号 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行 "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行 

③ vetur 格式化的标准js文件不符合ESlint规范
vetur 格式化的标准js文件不符合ESlint规范，会给你加上双引号、分号等
解决 vetur、prettier 格式化的标准js文件不符合ESlint规范的配置：

{ 
    // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化  "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.validate": [ "javascript", "javascriptreact", { 
    "language": "vue", "autoFix": true } ], // #让prettier使用eslint的代码格式进行校验  "prettier.eslintIntegration": true, // #去掉代码结尾的分号  "prettier.semi": false, // #使用带引号替代双引号  "prettier.singleQuote": true, // #让函数(名)和后面的括号之间加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // #这个按用户自身习惯选择  "vetur.format.defaultFormatter.html": "js-beautify-html", // #让vue中的js按编辑器自带的ts格式进行格式化  "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatterOptions": { 
    "js-beautify-html": { 
    "wrap_attributes": "force-aligned" // #vue组件中html代码格式化样式 } } } 

④ vue 文件和 html 文件，没有 eslint 风格提示
vue 文件和 html 文件，没有 eslint 风格提示，如图：

解决方法：
在 setting.json 文件中加入如下配置：

 // eslint 检测文件类型 "eslint.validate": [ "javascript", "javascriptreact", { 
    "language": "html", "autoFix": true }, { 
    "language": "vue" "autoFix": true } ] 

⑤ function () （eslint 推荐）和 function() （prettier 推荐） 的风格冲突问题

该问题摘抄至文章：https://blog.csdn.net/userkang/article/details/

如果推崇 eslint 的规范，也就是 function () 这种的。那么恭喜你，你什么都不用改。

如果你和我一样推崇 prettier 的规范，也就是 function() 这种的。那么就需要改改了。

这样做有个好处是，如果你的项目不需要配置 eslint 来检查代码 ，代码就不需要格式化为 eslint 的规范。

 { 
    "language": "vue" // "autoFix": true } 

但是如果你的项目配置了 eslint ，比如用 vue-cli 构建的项目，一般都会进行 eslint 检查。那么就在项目根目录的 eslintrc.js 中添加下面的配置，这种情况就可以把 autoFix 的注释打开了。因为可以自动修复成 eslint 的规范。

// 自定义的规则 module.exports = { 
    rules: { 
    'space-before-function-paren': 0 } } 

⑥ vue中使用Eslint对element-UI自动格式化支持不好

这个配置相应出现的问题可以参考这篇文章： https://blog.csdn.net/_/article/details/

参考文章