vue|[vscode]代码规范ESLint + Prettier 在vue项目中的使用和冲突解决[完美解决] vscode|ESLint|Prettier|js

前言

【vue|[vscode]代码规范ESLint + Prettier 在vue项目中的使用和冲突解决[完美解决]】在创建项目的时候记得勾选使用代码规范

文章图片

ESLint

把规矩都列出来写在文件里，规范大家的代码统一化
如果代码不符合规则,ESLint就会报警高或者报红

Prettier

把规矩都列出来写在文件里，规范大家的代码统一化
一键保存自动帮助大家通过统一的规则格式化代码

使用

在vscode中开发vue项目需要安装这三个插件

文章图片
在.eslintrc.js文件中配置rules属性[详细的规则见文档]
- 举个栗子规定字符串使用单引号和末尾不加分号
  rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'quotes': [1, 'single'],// 字符串使用单引号 'semi': [1, 'never'],//末尾不加分号 'prettier/prettier': 'off'// 防止终端中因为规则问题报警告,所以关闭 },
新建.prettierrc文件把规则配置进去 [详细的规见文档]
注意 配置的规则要和ESLint规则对应不能冲突
- 举个栗子代码统一格式化为字符串使用单引号和末尾不加分号
  { "semi": false,//末尾不加分号 "singleQuote": true,// 字符串使用单引号 "trailingComma": "none", "printWidth":1000 }