如何在Vite.js项目里增加eslint,prettier?

「我正在参与掘金会员专属活动-源码共读第一期，点击参与」

本篇文章介绍的是如何在Vite.js项目里增加eslint,prettier?

eslint是语法规则和代码风格的检查工具，prettier会根据自定义的规则对代码进行格式化和语法转换，保证了代码在项目中的统一。

在这篇初始化vite项目了解到了如何创建一个vite项目

npm init create-vite
# or
npm create vite

如何使用vite-pretty-lint

那么，如何添加eslint, prettier呢？vite-pretty-lint

npm init vite-pretty-lint 
#or
yarn create vite-pretty-lint

在vite项目中成功执行脚本之后，会出现两个问题提供选择：项目的框架和包管理工具。如下图：

执行完毕后，Mac系统command + p（windows系统ctrl + p）打开面板输入> reload，然后回车就Reload成功了。

我们再看看项目根目录里也新增了几个文件：

.eslintignore: eslint检查忽略的配置； .eslintrc.json: eslint配置

{
  "env": { 
    "browser": true,
    "es2021": true,
    "node": true
  },
  "overrides": [
    {
      "files": [
        "*.js",
        "*.jsx"
      ],
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
      },
      "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:prettier/recommended"
      ],
      "rules": {
        "react/react-in-jsx-scope": "off" // React17之后就不需要这个规则了
      }
    }
  ]
}

env: 启用特定环境的全局变量
overrides: 给指定文件files设置解析器parserOptions
parserOptions:
- ecmaVersion - 默认设置为 3，5（默认）， latest表示使用最新版本
- sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
- ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:

.prettierrc.json:prettier配置

{
  "trailingComma": "es5", // 对象或数组末尾加逗号
  "tabWidth": 2, // 缩进宽度
  "semi": true, //  句尾强制添加分号
  "singleQuote": true // 单引号
}

vite.config.js文件也更新了,添加了eslintPlugin插件。

源码

通过package.json，找到入口。

 "bin": {
    "create-vite-pretty-lint": "lib/main.js"
  },

它的入口在/lib/main.js这里,run函数是主线任务：

首先通过askForProjectType得到回答结果存到answer里
解构answer得到projectType和packageManager
通过projectType导入模板
整理packageList,eslintConfigOverrides,eslint变量
读取vite配置文件，然后开始执行installCommand里的脚本，创建eslintFile,prettierFile,eslintIgnoreFile,更新viteFile
最后提示用户执行成功。

结束语

研究如何添加eslint到vite项目，首先从脚本入手npm init create-vite-pretty-lint,去github找到对应的repo，然后根据package.json找到源码入口，找到源码入口就可以分析代码了。多多练习才能，熟能生巧。