【代码格式规范】eslint和prettier-526互联

配置eslint

执行安装命令

pnpm add eslint -D

执行eslint初始化命令

pnpm eslint --init

(1) How would you like to use ESLint? （你想如何使用ESLint？）
选择：To check syntax and find problems （检查语法并发现问题）

(2) What type of modules does your project use? （你的项目使用什么类型的模块？）
选择：JavaScript modules (import/export) （JavaScript模块(导入/导出)）

(3) Which framework does your project use? （你的项目使用哪个框架？）
选择：Vue.js

(4) Does your project use TypeScript? （你的项目使用TypeScript吗？）
选择：Yes

(5) Where does your code run? （你的代码在哪里运行？）
选择：Browser,Node

(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? （您想使用哪个包管理器？）
选择：pnpm

初始化后，会生成`.eslintrc.cjs`配置文件

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

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

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

执行`lint`命令

pnpm lint

这时候命令行中会显示出上图中的报错，意思就是在解析.vue后缀的文件时候出现解析错误parsing error。其实，在初始化eslint是，是有配置解析vue文件的插件eslint-plugin-vue。

通过eslint-plugin-vue官方文档可知。如果您已经使用了另一个解析器（例如"parser": "@typescript-eslint/parser"），请将其移动到 parserOptions中，这样它就不会与此插件vue-eslint-parser配置使用的解析器发生冲突。

修改.eslintrc.cjs文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
-   "parser": "@typescript-eslint/parser",
+	"parser": "vue-eslint-parser",
    "parserOptions": {
+		"parser": "@typescript-eslint/parser",
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": { // 0-忽略，1-警告，2-报错
        "no-console": 1,
        "quotes": 2, // 双引号
        "semi": 1, // ;
    }
}

两个parser的区别在于，外面的parser用来解析.vue后缀文件，使得eslint能解析<template>标签中的内容，而parserOptions中的parser，即@typescript-eslint/parser用来解析vue文件中<script>标签中的代码。

此时，再执行pnpm lint，就会发现校验通过了。