保姆级 vue3 项目中配置eslint规则(0-1)。

大家好，我是前端小张同学，最近公司的项目也接近尾声了，然后没活干，就一直在学习，我个人在技术角度上是准备往工程化这个方向去发展，以后可能会往管理上面进行发展。不管怎么年轻的时候还是要把技术提高才有说服力，大家都说 前端已死 ，你们觉得呢？

接下来我就和大家一起完成工程化里的那么一点点东西吧。

1 ：什么是ESlint 和 styleLint？😅

相信干前端的小伙伴们，大家在公司的项目中都见到过这么一个文件，用的好你的代码非常舒适，用的不好让你们头皮发麻 , 它可以在我们代码编译之前先检查你的代码是否符合该文件配置规则里的规范，如果不符合，它将会跑出一段错误，阻塞你的项目程序😨。

例如 -> 这样然后你的项目就挂x了

styleLint也是一样，如果你的css写的不符合rules中的规则也是会报相同测错误，只是来源不同。

1.1 ：Eslint

如果看完上方的内容，你觉得这个东西非常不适合你，那你可以关闭项目中的 eslint😭。

1.1.1 如何关闭项目中的eslint？🤪

**1：注释插件(建议使用)**😀

把你vite脚手架搭建的项目中的将插件注释掉，但你千万要把你刚刚注释完的代码提交到你的仓库里，不然有你好果子吃。

js 复制代码

import eslintPlugin from 'vite-plugin-eslint';
    eslintPlugin({
        fix: true,
        cache: false,
        include: [
            'src/**/*.vue',
            'src/**/*.ts',
            'src/**/*.js'
            ],
      }),

**2：在vueCli中怎么关闭？**😁

找到你的vue.config.js文件中添加以下代码

js 复制代码

lintOnSave: false

3：忽略检查你的文件😂

你可以在你的项目根目录下创建一个.eslintignore文件，它可以帮助你忽略到一些文件进行检查。

例如

lua 复制代码

.DS_Store
node_modules
dist
.eslintrc.cjs
.vscode
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
dist-ssr

4：删除你本地的.eslintrc.cjs 文件(不建议你这么做)😆

1.1.2 如何关闭项目中的styleLint？🤪

一样，注释掉你的插件，or 你直接忽略 or 匹配文件规则为空

js 复制代码

  "overrides": [
    {
      "files": [ //删掉它
        "*.less",
        "*.css",
        "*.vue",
        "**/*.vue"
      ]
    }
  ],

1.2 ： StyleLint

如果eslint已经让你头大了，那你就别考虑stylelint 。如果你需要请往下看，

2：它有什么用处，我总结了以下几点？

项目代码更规范🙄
统一代码风格😊
让你无时无刻不停留在错误当中😤
让你头发掉的更快😡
让你对它记忆犹新，你存在我深深的脑海里🤬...

3：在项目中如何进行配置？🛒

Eslint🎈

3.1 初始化🎆

执行： npm init @eslint/config

shell 复制代码

npm init @eslint/config

又到了选择的时候了，小孩子才做选择，我全都要😅。

1：你想如何使用ESLint?🎁

shell 复制代码

? How would you like to use ESLint? ... // 你想如何使用ESLint?
  To check syntax only //只检查语法
> To check syntax and find problems // 检查语法并发现问题
  To check syntax, find problems, and enforce code style // 检查语法、发现问题并强制执行代码样式

选择第二个，第一个和第三个太极端了。

2：esModule or CommonJs🎄

typescript 复制代码

? What type of modules does your project use? ... //你的项目使用什么类型的模块?...
> JavaScript modules (import/export) // esModule
  CommonJS (require/exports) //commonJS
  None of these // 其他，这些都不是

根据自己情况而定，我这里选择 esModule

3：什么框架开发🎀

rust 复制代码

? Which framework does your project use? ...    你要运用在哪个开发框架中   
  React
 >Vue.js
  None of these

选 Vue。

4：TypeScript Or JavaScript🎞

yaml 复制代码

? Does your project use TypeScript? >> No / Yes

根据自己情况而定，我这里选择 TypeScript

5：你的代码运行在哪里?🎃

css 复制代码

 Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser // 浏览器
√ Node // Node服务端

根据自己情况而定，我这里选择 Browser

6：配置文件的格式是?🎑

arduino 复制代码

? What format do you want your config file to be in? ... // 您希望配置文件的格式是什么
> JavaScript 
  YAML
  JSON

随便选，我这里选择 JavaScript

7：本地不存在eslint 是否要现在下载?🕶

vbnet 复制代码

Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint@latest
? Would you like to install them now? >> No / Yes

如果你没有你就选择 yes 如果有就选择 NO

7：什么类型的包管理工具🧤

perl 复制代码

? Which package manager do you want to use? ... 
> npm
  yarn
  pnpm

根据自己情况而定，我这里选择 npm ，其实我是yarn 的真爱粉，以后可能会成为 pnpm

ok ，到这里你的eslint初始化就搞定了，等待下包，下载完成之后，你的根目录就多出了一个文件(老演员了)。

分析 .eslintrc.js 配置🎒

下面 eslint 规则我只介绍了三个，如果你需要更多的详细的规则解释，你可以加入我们的学习交流群领取(刚刚创建噢，在最后)。

js 复制代码

module.exports = {
    "env": {
        "browser": true, // 环境
        "es2021": true // 支持的特性 2021
    },
    "extends": [ // 使用哪些拓展
        "eslint:recommended",
        "plugin:vue/vue3-essential" // 针对Vue3的插件
    ],
    "overrides": [ //  匹配哪些文件的 配置
        {
            "env": { // node环境
                "node": true
            },
            "files": [ // 匹配哪些文件的
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": { // 指定要使用的解析器
                "sourceType": "script" // 表示你的代码是以脚本的形式进行加载和执行的
            }
        }
    ],
    "parserOptions": { 
        "ecmaVersion": "latest", // 指定要使用的 ECMAScript 版本
        "sourceType": "module" // 指定代码的来源类型,如果你的代码是 ES 模块，则应设置为 'module'。
    },
    "plugins": [
        "vue" // 插件集合
    ],
    "rules": {
     // eslint 规则 比如
      'comma-spacing': [2,
        {
          // 强制在逗号前后使用一致的间距  例  a , b   or a, b
          before: false,
          after: true
        }
      ],
      'key-spacing': [2,
        {
          // 在对象文本属性中的键和值之间强制实施一致的间
          beforeColon: false,
          afterColon: true
        }
      ],
      "no-var": "error", //禁止使用var定义变量
    }
}

如果你要关闭某条规则你可以 off
如果你希望某条规则报错你可以 error
如果你希望只是警告你可以设置为 warn

更多请查阅eslint官方文档

ok，配置到这里就结束了接下来我们配置一下 vite.config.ts

vite.config.ts 配置 🍔

1：下载 vite-plugin-eslint 插件 🍕

js 复制代码

npm i vite-plugin-eslint --save-dev

2: 导入vite-plugin-eslint🧇

javascript 复制代码

import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
    plugins: [
        vue(),
        eslintPlugin({
                fix: true, //修复错误
                include: [
                        'src/**/*.vue',
                        'src/**/*.ts',
                        'src/**/*.js'
                ],
        }),
     ]
})

ok，在这里项目配置结束了，最后是开发软件(vsCode)的一些设置。

1：设置保存时自动格式化🧀

2：下载 esLint 插件🥖

3：设置你默认的格式化文档插件🥙

🆗，到这里你的eslint 在你保存的时候就可以完美的生效了。

styleLint 放到下一篇讲吧(不然太长了)，等我出了第一时间发布。

3：总结🍤

我是前端小张同学，期待你的关注，一起学习吧。

这是一个前端学习的群，欢迎大家加入，eslint最详细的规则解释我会发在这个群里，本人就在群里，有什么问题可以在群里随时问。