vue项目添加eslint

eslint 可以保证项目代码风格一致性，给项目添加eslint依赖的方法：

1. 借助vue-cli创建项目是自动配置eslint
2. 按照eslint官网步骤，通过npm命令行手动添加eslint依赖

手动添加eslint步骤：
全局安装eslint:

npm install -g eslint

初始化说明

cd 到工程目录下初始化

eslint --init

它会问你一些问题，你可以按照自己喜好进行配置

1. 想怎样使用eslint

? How would you like to use ESLint? … 
  To check syntax only //只检查语法
❯ To check syntax and find problems // 检查语法 并提示错误
  To check syntax, find problems, and enforce code style  //检查语法、提示错误 和强制格式化

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

What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

3. 您的项目使用什么框架

Which framework does your project use? … 
❯ React
  Vue.js
  None of these

4. 是否使用TS

Does your project use TypeScript? · No / Yes

5. 您的项目在哪里运行？
   一般Browser和node都选

Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

6. 您想如何给您的项目定义eslint规则？

• 使用大众化模版
• 自定义规则
• 检查现有的代码自动生成
  如果觉得麻烦可以直接选第一个，可选自定义设置错也没关系，在配置文件里可以随意修改。

How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

我选择使用大众化模版，随便选了google 的，可能模版需要的eslint版本跟本地安装的不一样会提示

Would you like to install them now with npm? · No / Yes

选择yes重新安装一些就好
最后所有配置如下：

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · google
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-google@latest eslint@>=5.16.0
✔ Would you like to install them now with npm? · No / Yes

基本配置说明

生成.eslintrc.js文件：

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true,
  },
  'extends': [
    'plugin:vue/essential',
    'google',
  ],
  'parserOptions': {
    'ecmaVersion': 12,
    'sourceType': 'module',
  },
  'plugins': [
    'vue',
  ],
  'rules': {
  },
};

env
Environments，指定代码的运行环境。不同的运行环境，全局变量不一样，指明运行环境这样ESLint就能识别特定的全局变量。同时也会开启对应环境的语法支持，例如：es6。
extends
可以从基础配置中继承已启用的规则，ESLint 不需要自行定义大量的规则，因为很多规则已被分组作为一个规则配置。
如上，引入vue 官方eslint插件规则和Google的eslint规则，如果值为 “eslint:recommended” 则启用了eslint默认的规则。
属性值可以是到基本配置文件的绝对路径

"extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],

parserOptions
可指定你想要支持的 JavaScript 语言选项，
ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。
也可用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10)
sourceType - 设置为 “script” (默认) 或 “module”（如果你的代码是 ECMAScript 模块)
ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性
如启用JSX：

"ecmaFeatures": { "jsx": true }

plugins
是一个 npm 包，通常输出规则，一般包含一个或多个规则配置，可以在extends中引入
rules
rules可以自定义校验规则，可以覆盖extends引入的规则
待续。。。