关于vue.js: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.validation.template": 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}