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

插件安装首先在vscode插件中搜索eslint和prettier。啥也不管，这俩必须得装。插件简介vscode插件库里的eslint是用来在你写代码的时候就直接给你报错。（vue-cli中的eslint是在浏览器中报错）prettier是代码格式化插件，用来辅助eslint，否则你调了花半天，一格式化全没有。实战演练 # 创建一个vue项目 vue-cli@2.9.6，更高版本请使用create

weixin_39741101

1216人浏览 · 2021-02-03 08:46:21

weixin_39741101 · 2021-02-03 08:46:21 发布

插件安装

首先在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

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