vscode下vue项目中eslint的使用方法-创新互联

前言

在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如：

• 不清楚安装的拓展的功能，导致安装了重复功能的拓展
• 右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整
• 保存时不能自动修复代码

以下通过自己的实践，进行了相应配置，目前可以实现：

• 仅安装2个推荐的拓展
• 右键格式化文档按照eslint规则，不会产生错误
• 保存时自动修复代码

vscode 拓展安装

eslint 拓展

该拓展本身不带任何插件，当前项目要使用该拓展，需要安装相应的npm包（全局安装或当前项目安装）

对于 vue 项目，通常在 vscode 中做如下设置:

 //保存时自动修复代码
 "eslint.autoFixOnSave": true,
 "eslint.options": {
  // 应检查代码的文件扩展名数组
  "extensions": [
   ".js",
   ".vue"
  ]
 },
 // 配置要验证的语言标识和自动修复选项，比前面两个配置的结合更为细粒度话。可以仅配置下面代码
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  {
   "language": "vue",
   "autoFix": true
  }
 ],