Eslint第二篇（配置使用）

一、代码规范工具

1、Vetur

此工具作用vue高亮显示。

2、Prettier-Code formatter

此工具作用格式化代码。

####3、Eslint
此工具作用检测代码规范。

###二、Vetur安装
只要安装vetur工具即可，安装完成后，Vue可以高亮显示。

###三、Prettier-Code formatter 安装和配置

• 第一步：安装Prettier-Code formatter工具。
• 第二步：在项目根目录下添加.prettierrc.js文件，主要为了设置Prettier与eslint保持一致。
  配置代码如下：

module.exports = {
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 不使用缩进符，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};

###四、Eslint安装和配置

• 第一步：安装Eslint工具。
• 第二步：设置首选项，为了自动保存修正和支持检查vue
  配置如下：

{
"explorer.confirmDelete": false,
"editor.formatOnType": true,
"editor.formatOnSave": true,
"editor.detectIndentation": false,
//保存时使用eslint规范自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{
"language": "vue",
"autoFix": true
}
],
//开启 eslint 支持
"prettier.eslintIntegration": true
}

• 第三步：设置.eslintrc.js配置
  配置如下，此配置继承至standard：

module.exports = {
  // 此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  // 此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
  // 此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
  parserOptions: {
    parser: 'babel-eslint'
  },
  // 此项指定环境的全局变量，下面的配置指定为浏览器环境
  env: {
    node: true
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style  (拓展至standard，具体标准详见md文档)
  // 此项是用来配置标准的js风格，就是说写代码的时候要规范的写，如果你使用vs-code我觉得应该可以避免出错
  extends: ['plugin:vue/essential', 'standard'],
  // required to lint *.vue files
  // 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的
  //   plugins: ["html"],
  // add your custom rules here
  // 下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
  // 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
  // "off" -> 0 关闭规则
  // "warn" -> 1 开启警告规则
  // "error" -> 2 开启错误规则
  rules: {
    // 强制结尾有分号
    semi: [1, 'always'],
    // 强制使用2空格缩进
    indent: [1, 2],
    // 强制使用单引号
    quotes: [1, 'single'],
    //注释首尾留空格 关闭
    'spaced-comment': [0],
    'space-before-function-paren': [0],
    'no-console': [0], //process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/no-parsing-error': [
      2,
      {
        'x-invalid-end-tag': false
      }
    ]
  }
};