VS code 代码格式

主要针对 vue

一、安装 VS code 扩展

• ESLint
• Prettier - Code formatter
• Vetur

二、 配置 setting.json

1、解决ESLint 和Prettier - Code formatter的冲突

eslint 是用来做代码风格检查的，比较关注代码质量，并且会提示不符合风格规范的代码。除此之外 eslint 也具有一部分代码格式化的功能，prettier 本身就是用来做代码格式化的，准确的说它是来美化代码的，所以这方面有更大的优势。同时 prettier 也是对 eslint 格式化的基础上的一个极好的补充

• 语句末尾不加分号和强制单引号等 eslint 风格检查

  配置：

   // prettier 设置语句末尾不加分号
    "prettier.semi": false,
    // prettier 设置强制单引号
    "prettier.singleQuote": true,
  

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

  如果推崇 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
    }
  }
  

2、vue 文件格式化配置

• 修改 Vetur模版

  // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
  

• vue eslint 风格设置

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

三、 完整配置

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

blog.csdn.net/userkang/ar…