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

最新推荐文章于 2024-04-26 15:32:35 发布

@Umbrella

最新推荐文章于 2024-04-26 15:32:35 发布

阅读量7.4w

点赞数 38

分类专栏：【小知识】文章标签： vscode 格式化代码

本文链接：https://blog.csdn.net/Umbrella_Um/article/details/99704468

版权

【小知识】专栏收录该内容

17 篇文章 0 订阅

订阅专栏

VScode格式化代码配置及插件

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

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

先按步骤打开 setting 界面，
Code --> preferences -->setting （也可以快捷键 command + ,（mac）直接打开）

现在看到的是界面配置模式，点击右上角的红框的图标（如下图），可以打开 settings.json 文件
在这里插入图片描述

格式化的快捷键

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

配置在手，天下我有

如果你安装了Elinst Vetur Prettier ，只需要这份配置就可以通用处理这些插件间的问题：
在这里插入图片描述
通配： 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考，然后结合自己的需求去配置。如果没有特殊需求，也可以拿去直接用

{
  // 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/84305689

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

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

先把 setting.json 中 eslint.validate 字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候，走
prettier 的规范，而不再需要根据 eslint 的规范，进行 fix。

这样做有个好处是，如果你的项目不需要配置 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/qq_34803821/article/details/84972781

参考文章

https://blog.csdn.net/userkang/article/details/84305689
https://blog.csdn.net/latency_cheng/article/details/80409202
https://blog.csdn.net/qq_34803821/article/details/84972781