vue 项目在 vscode 中的配置

vscode + eslint + prettier 配置

目标

  1. 能使用快捷键 alt + ctrl + f进行格式化(html, css, js,vue文件)
  2. 保证 eslint 规则与 vscode 格式化规则一致
  3. 能够自动 import 包,自动删除未使用的多余 import 语句

使用 vscode 格式化时很头疼,因为我安装了prettier插件和eslint插件, 他们都有格式化js文件的功能。

prettier 和 eslint 的规则总是撞车, 刚保存文件自动格式化,立刻又自动执行按照另一种规则给格式化了。

好好研究了一番,发现代码格式化的规范不用那么复杂,因为目前网上流行的配置是 vue-element-admin 项目中那一套配置,几年过去,已经没必要那么复杂

文章尾部有 .prettierrc 配置文件 和 eslint.js 配置,可以直接 copy 到项目中使用

所以,快捷键alt + ctrl + f到底干了什么?

  • vscode 的一旦安装了 prettier 插件,那么此扩展 prettier-vscode 会生成一份默认的格式化配置,如果你本地项目有 .prettierrc 文件,那么就按照你的项目配置文件执行格式化,但不会从 ESLint 配置文件读取配置

  • 而 prettier 和 eslint 的优先级,取决于setting.json中的此项配置

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

当两者混用时(同时安装了 eslint 和 prettier 插件),使用 alt + ctrl + f 进行格式化时,那么就在eslint配置文件 .eslintrc.js中添加上这一句

rules:{
  "prettier/prettier": ["error", {"singleQuote": true, "parser": "flow"}],
}

关于Vue文件中

你可能感兴趣的:(Vue.js,vscode,vue,eslint,prettier,config,配置)