涪陵建设工程信息网站口碑好的设计培训机构

• npm install eslint -D 安装eslint库

• npx eslint --init 初始化配置，按项目实际情况选
  

• 自动生成eslint.config.js，可以添加自定义rules
  

• 安装ESLint插件
  
  此时打开vue文件就会标红有问题的位置

• 安装prettier npm install prettier eslint-config-prettier eslint-plugin-prettier -D

• 创建.prettierrc.json

  {"semi": false,"singleQuote": false,"tabWidth": 2,"printWidth": 80,"trailingComma": "none"
  }
  

• 安装prettier插件
  

• 打开vscode用户配置Ctrl + Shift + p -> Settings
  

• 添加内容：

  {"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode","[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"eslint.validate": ["javascript", "vue"],"eslint.run": "onType","eslint.format.enable": true
  }
  

• 到这里应该就配好了，在vue文件中执行Ctrl + s验证保存自动格式化

• 参考链接