ESlint 代码规范

通过 vscode 中的 eslint 插件来实现自动修正

 如何配置

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},

// 保存代码，不自动格式化
"editor.formatOnSave": false

• 注意：eslint 的配置文件必须在根目录下，这个插件才能才能生效

• 注意： 使用了 eslint 校验之后，把 vscode 带的那些格式化工具全禁用了（否则会冲突）

prettier 配合 eslint

• 安装 prettier 插件

• 增加 prettier 的配置文件， 在项目的根目录下新建 .prettierrc文件

• {
    "semi": false,
    "singleQuote": true
  }

• 设置prettier为默认的格式化插件

• // 保存的时候自动格式化
  "editor.formatOnSave": true,
  // 默认格式化插件使用prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

   

  自定义规则

  在.eslintrc.js中，有一个属性是专门用来设置自定义代码规则的，这个规则

• module.exports = {
    root: true,
    env: {
      node: true,
    },
    extends: ['plugin:vue/essential', '@vue/standard'],
    parserOptions: {
      parser: 'babel-eslint',
    },
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       // 去掉禁止出现多行空行规则
      'no-multiple-empty-lines': 'off',
    },
  }

  rules 是一个对象，以键值对的格式来约定规则：

• 键名是规则名

• 值是这条规则的具体说明。最常见的有 off,warn,error。