安装eslint

npm i eslint -D

执行eslint初始化命令

npx eslint --lint

// 你想怎么使用ESlint
(1) How would you like to use ESLint?
选择：To check syntax and find problems 
// 项目中使用的导入方式是什么
(2) What type of modules does your project use?
选择：JavaScript modules (import/export) 
// 项目使用的框架是什么
(3) Which framework does your project use? 
选择：Vue.js 
// 使用Ts了吗
(4) Does your project use TypeScript? 
选择：Yes 
// 代码运行环境
(5) Where does your code run? 
选择：Browser 
// 配置文件采用什么格式
(6) What format do you want your config file to be in?
选择：JavaScript 
// 是否现在安装
(7) Would you like to install them now? 
选择：Yes 
// 使用什么包管理工具
(8) Which package manager do you want to use? 
选择：npm

依赖安装完成后，会生成.eslintrc.js配置文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    +   "node":true    // -> 添加此行解决下面报错问题
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

此时打开.eslintrc.js配置文件会出现一个报错，需要再env字段中增加node: true配置以解决eslint找不到module的报错

在package.json文件中的script中添加lint命令

在VSCode 报错 Delete 'CR' ... 执行次命令可一键修复（npm run lint）

    "scripts": {
        // eslint . 为指定lint当前项目中的文件
        // --ext 为指定lint哪些后缀的文件
        // --fix 开启自动修复
        "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
    }

执行npm run lint 后会有一个报错(报错详情可查看原文链接 此处省略一堆文字)

解决

修改.eslintrc.js文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

安装VSCode ESlint插件

如果写一行代码就要执行一遍lint命令，这效率就太低了。所以我们可以配合vscode的ESLint插件，实现每次保存代码时，自动执行lint命令来修复代码的错误。

在项目中新建.vscode/settings.json文件，然后在其中加入以下配置。

{
    // 开启自动修复
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true
    }
}

配置prettier

在根目录下新建.prettierrc.js

module.exports = {
    // 一行的字符数，如果超过会进行换行，默认为80
    printWidth: 80, 
    // 一个tab代表几个空格数，默认为2
    tabWidth: 2, 
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
    useTabs: false, 
    // 字符串是否使用单引号，默认为false，使用双引号
    singleQuote: true, 
    // 行位是否使用分号，默认为true
    semi: false, 
    // 是否使用尾逗号，有三个可选值"<none|es5|all>"
    trailingComma: "none", 
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
    bracketSpacing: true
}

在package.json中的script中添加以下命令

{
    "scripts": {
        "format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
    }
}

安装vscode的Prettier - Code formatter插件

在.vscode/settings.json中添加一下规则

{
    // 保存的时候自动格式化
    "editor.formatOnSave": true,
    // 默认格式化工具选择prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

解决eslint与prettier的冲突

npm i eslint-config-prettier eslint-plugin-prettier -D

在 .eslintrc.json中extends的最后添加一个配置

{ 
    extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    'plugin:@typescript-eslint/recommended',
+    // 新增，必须放在最后面
+    'plugin:prettier/recommended' 
  ],
}

最后重启vscode，你会发现冲突消失了，eslint与prettier也按照我们预想的各司其职了。

这是我见过整合ESlint最好的文章 : juejin.cn/post/711829…