vue 项目的 Eslint 代码规范

下载安装Eslint

全局安装： npm install -g eslint
项目安装： npm install eslint --save-dev

注意：
1.如果你想你所有项目都使用eslint，请全局安装；如果你想当前项目使用，请局部安装。
2.局部安装时请使用–save-dev，因为eslint是适用于开发环境（Software Development Environment，SDE）的插件，qing请不要添加到生产环境中。

接下来需要初始化esLint： eslint --init

上面的这个命令我使用没有效果，我用的这个./node_modules/.bin/eslint --init

接下来就是配置eslint

你想怎样使用eslint

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? (Use arrow keys)
  To check syntax only //只检查语法
> To check syntax and find problems//检查语法、发现问题
  To check syntax, find problems, and enforce code style//检查语法、发现问题并执行代码样式

您的项目使用什么类型的模块?
vue中用的JavaScript modules

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? (Use arrow keys)
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

项目中使用的什么框架？
我用的vue

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? (Use arrow keys)
> React
  Vue.js
  None of these

你的代码运行在什么地方？
这里是多选，我选的浏览器和node

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Browser
 ( ) Node

您想如何为您的项目定义一个样式?
我选的第二个，问问题

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? (Use arrow keys)
> Use a popular style guide   // 1. 使用大厂的
  Answer questions about your style  //2. 问问题
  Inspect your JavaScript file(s)  //3. 检查现有的代码自动生成

您希望配置文件的格式是什么?
我选JavaScript

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in?
> JavaScript
  YAML
  JSON

你用什么来进行缩进
我比较爱用tabs

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in? JavaScript
? What style of indentation do you use? (Use arrow keys)
> Tabs
  Spaces

字符串用什么引号？单引号还是双引号

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in? JavaScript
? What style of indentation do you use? Tabs
? What quotes do you use for strings? (Use arrow keys)
> Double
  Single

你用什么行尾?
我用的window

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in? JavaScript
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? (Use arrow keys)
> Unix
  Windows

你需要分号吗?

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in? JavaScript
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? (Y/n)

您希望配置文件的格式是什么?

PS F:\resource>  ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? Vue.js
? Where does your code run? Browser, Node
? How would you like to define a style for your project? Answer questions about your style
? What format do you want your config file to be in? JavaScript
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? (Use arrow keys)
> JavaScript
  YAML
  JSON

后面根据实际情况回答就好了，即使不小心答错也没关系，都在配置文件里随时可以修改。

在你的项目根目录下面会有一个.eslintrc.js文件，里面内容为

module.exports = {
    "env": {               //Environments，指定代码的运行环境。不同的运行环境，全局变量不一样，指明运行环境这样ESLint就能识别特定的全局变量。同时也会开启对应环境的语法支持，例如：es6。
        "browser": true,
        "es2021": true
    },
    "extends": [  //ESLint 不需要自行定义大量的规则，因为很多规则已被分组作为一个规则配置。
        "eslint:recommended",  //就是 ESLint 的推荐规则配置，包含了ESLint的规则 里前面有✔︎的部分，recommended 规则只在ESLint升级大版本的才有可能改变。
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [    //顾名思义就是插件  plugins一般包含一个或多个规则配置，可以在extends中引入。
        "vue"
    ],
    "rules": {   //这里可以对规则进行细致的定义了，覆盖之前前面说的extends中定义的规则。
    }
};

错误等级有三级 0，1，2，分别代表off，warning，error。error错误会终止 lint-staged 执行。

0或’off’：关闭规则。
1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。
2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。


参数说明：
参数1 ： 错误等级
参数2 ： 处理方式

然后还要在package.json文件里面配置

"lint": "eslint --ext .js,.vue src"

然后就可以在控制台输入

npm run lint检查

然后就能检查代码的规范性了
不过很多报错并不知道为啥错，但是可以成功运行。。。。