[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
    }
    

注意点

• 这里在项目中配置的规则,开发时vscode以项目规则为准

• 如果项目中没有.eslintrc.js 和 .prettierrc 则会以开发工具配置规则为准