vscode 自动格式化 vue 项目代码

不管是多人合做仍是我的开发的项目，统一的代码风格对于项目的维护都有着至关的益处，同时，各类代码质量的校验规则还可在开发初期便避免一些低级错误的出现

概要

本文主要经过 vscode-eslint，vscode-stylelint 两个插件，及 .vscode/extensions.json，.vscode/setting.json，.eslintrc.js，.stylelintrc.js 四个配置文件，实现 vscode 在保存文件时自动对 vue 文件的 template，script，style 三个部分自动进行错误修正及格式统一的功能

配置

• .vscode/extensions.json

自动推荐安装格式化所需插件

{
  "recommendations": [
    "octref.vetur",
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "editorconfig.editorconfig"
  ]
}

• .vscode/setting.json

统一编辑器自动格式化配置，同时关闭 vetur 的部分配置，减小资源消耗

{
  "eslint.validate": [
    "javascript",
    "html",
    "vue"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "vetur.format.enable": false,
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false
}

• .editorconfig (推荐)

统一编辑器的默认换行及缩进规则

[*]
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

• .eslintrc.js

将默认的 plugin:vue/essential 替换为 plugin:vue/recommended 以便实现对 template 部分的格式化，同时更加严格的校验规则也利于代码质量的提高

module.exports = {
  // ...
  extends: [
    'plugin:vue/recommended',
    '@vue/standard'
  ],
  // ...
}

• .stylelintrc.js

样式格式化配置

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recess-order'
  ]
}

其余

vscode 的格式化插件大体可分为 format 如 prettier，js-beautify-html 等和 lint 如 eslint，stylelint 等两种

早期 eslint 等校验工具并不具有修正格式错误的能力，因而以 prettier 为表明的格式化工具出现并受到推崇，但同时也存在与 eslint 规则冲突等问题，而目前 eslint 等工具均已支持修正能力，同时还有对代码质量的校验能力，因此更加推荐一些 (也可能我对 prettier 了解的不够多，若是有什么其余优点还请指出)

format 工具也可经过如下配置实现文件保存时自动格式化 (不推荐)

• .vscode/setting.json

  {
     "editor.formatOnSave": true
  }