【简易教程】基于Vue-cli使用eslint指南

【简易教程】基于Vue-cli使用eslint指南

插件安装

首先在vscode插件中搜索eslint和prettier。

啥也不管，这俩必须得装。

插件简介

vscode插件库里的eslint是用来在你写代码的时候就直接给你报错。（vue-cli中的eslint是在浏览器中报错）

prettier是代码格式化插件，用来辅助eslint，否则你调了花半天，一格式化全没有。

实战演练

# 创建一个vue项目 vue-cli@2.9.6，更高版本请使用create创建项目。
vue init webpack eslint_test

eslint那一栏请选择none，这样vue-cli会帮你下载eslint，并进行一些基本的配置。

但是不会帮你设置rules（rules就是各种代码规范的不允许）。

下载好后目录结构如下：

文件介绍

里面有两个文件非常重要。

.eslintignore 和 .eslintrc.js

.eslintignore ，见名知意，ignore 忽视一些文件。即在文件里面规定的不会被eslint进行检查。

例如这里面不会对/build/文件下面的文件做语法检查。

.eslintrc.js ，是eslint能起作用的根本。vue-cli里面eslint和vscode里的eslint都以这个文件为判定标准。

补充文件

我们得在根目录下新建一个.prettierrc文件。

.prettierrc，是prettier格式化的配置文件，建议用json格式书写。

例如你如果配置下面样式。

{
  // 采用分号
  "semi": true,
  // 采用单引号
  "singleQuote": true,
  // tab采用两个空格长度
  "tabWidth": 2
}

格式化过程就会像下图所示：

双引号自动改成单引号，没加的分号，自动补齐。

Eslint.js配置

上文中说过，.eslintrc.js是eslint起作用的关键文件，所以我们必须学会进行一些配置。

如果安装eslint的时候选择none，.eslintrc.js文件应该和下面是一样的。

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
  extends: ['plugin:vue/essential'],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

上面最重要的模块就是rules模块。它是给我们来设定一些eslint的规则的。

例如我在rules里面添加一条规则’no-var’: [‘error’],此时我们就不能在程序中使用var来定义变量了。

只能使用let来定义变量，const来定义常量。

rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-var': ['error'],
  },

例如下图中，我写了var a = 1;它直接报错了。

其他的也与之类似。附常用rule：

 rules: {
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 尾随逗号规则
    'comma-dangle': [
      'error',
      {
        arrays: 'always',
        objects: 'always',
        imports: 'never',
        exports: 'never',
        functions: 'never',
      },
    ],
    // 禁止使用var规则
    'no-var': ['error'],
    // 必须使用分号
    semi: ['error', 'always'],
    // 必须使用单引号
    quotes: ['error', 'single'],
    // 必须使用两个空格进行缩进
    indent: ['error', 2],
  },

附录官网

prettier官网 https://prettier.io/docs/en/configuration.html

eslint官网 https://eslint.bootcss.com/docs/rules/

airbnb中文文档 https://github.com/BingKui/javascript-zh#functions