【简易教程】基于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/configuringmodule.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 filesplugins: ['vue'],// add your custom rules hererules: {// 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