vue3学习之路（二）安装eslint，提高代码的质量和可读性_vue3安装eslint

前言

为什么要用代码检查工具，因为当你代码中有些地方格式写错但是不提示，而且代码篇幅很长的时候，找起来就很头疼。

公司项目标准化工具一直用的是eslint，主要用于规范我们的代码，提高代码的可读性。

除了eslint，其实还有个prettier，二者的区别是eslint只能作用于js文件代码，而prettier所以代码都支持规范，但是两个插件之间是有冲突的，需要单独处理。考虑公司一直以来都用的是eslint，所以打算只安装eslint。

vue3在创建项目的时候会提示你是否要安装eslint，我当时选择没有安装。如果为了简便在创建项目的时候可以选择安装上

安装eslint

1.安装插件

我将安装8.56.0版本的

npm i eslint@8.56.0 --legacy-peer-deps

有人注意到我在安装的时候加了--legacy-peer-deps 为什么呢，因为安装的时候可能会报错，这是因为我的npm版本是7以上的版本了，和npm6.x 不一样 对命令的要求更加严格一些

然后安装几个eslint依赖包（这都是公司项目里有的，有一些我也不太明白具体作用是什么，所以先全部安装上，但是由于我nodejs版本为18较高，这些插件就不能用原来的版本）

"@vue/cli-plugin-eslint": "^4.5.0",  // 5.0.8
"@vue/eslint-config-standard": "^5.1.2", // 8.0.1
"babel-eslint": "^10.1.0",
"eslint-plugin-import": "^2.20.2", // 2.29.1
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1", // 6.1.1
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2", // 9.25.0

2.配置文件

package.json文件配置

在package.json文件中添加代码

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

新建.eslintrc.js

在项目目录底下新建.eslintrc.js文件，内容如下，这个内容好像和package.js里的内容大差不差，我认为公司这么做一定有他的理由，所以我两个都保留下来了。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 0
  }
}

使用说明

eslint规则官网上都有，网址为https://eslint.org/docs/latest/use/configure/，不过是英文版的

中文翻译的可以参考 eslint规则 和 eslint规则这两个博主的，都是比较全的。