Create-React-App 到 Vite: ESLint 环境架设

会有今天的文章是因为上次由 CRA 转到 Vite 后(如果还没有看文章的话，可以点这里，发现原本的ESLint设定全部都不能用了，需要全部重新设定

这边作为 React 的开发者要羡慕一下 Vue 的开发者，因为 Vue 的专案在 init时，就会有 ESLint 可供选择

回到主题，今天要示範如何在 CRA 转 Vite 的专案中加入 ESLint:

配置 ESLint

首先需要线下载 ESLint 相关套件

npm install eslint prettier eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

.eslintrc.js

在根目录下建立 .eslintrc.js 资料夹，并且加入

module.exports = {env: {browser: true,node: true,},extends: ['eslint:recommended','plugin:react/recommended','plugin:import/recommended','plugin:jsx-a11y/recommended','eslint-config-prettier',],parserOptions: {ecmaFeatures: {jsx: true,},ecmaVersion: 'latest',sourceType: 'module',},settings: {react: {version: 'detect',},'import/resolver': {node: {paths: ['src'],extensions: ['.js', '.jsx', '.ts', '.tsx'],  }, },},rules: {// 需在这边加入你的ESLint设定 },};

.eslintignore

建立一个 .eslintignore 的档案，这个档案会告诉 ESLint 哪些目录和文件要被忽略，以下的资料夹跟路径可由读者自己去设定

node_modules/dist/.prettierrc.js.eslintrc.jsenv.d.ts

Package.json

都好了以后，我们会需要到 package.json 里面新增script，来作为 ESLint 检查的指令

"scripts": {    ...    "lint": "eslint . --ext .ts,.tsx"  },

现在在terminal下指令 npm run lint 应该会看到一堆错，接着就一个一个改

配置 Prettier

首先先在根目录建立一个 prettierrc.js 的档案

module.exports = {  "trailingComma": "all",  "tabWidth": 2,  "semi": true,  "singleQuote": true,  "printWidth": 120,  "bracketSpacing": true}

Vscode

接着你需要更改一点 Vscode 的设定

在搜寻栏搜寻 config path ，就会看到 Prettier: Config Path 需修改为 .prettierrc.js

接着输入 format on save ，并把他勾起来

输入 deafault formatter，选择 Prettier - Code formatter

如果你觉得上面太过繁琐，可改由在 settings.json 加入下面几行：

{  "prettier.configPath": ".prettierrc.js",  "editor.defaultFormatter": "esbenp.prettier-vscode",  "editor.formatOnSave": true}

现在把专案关闭，并且重启，应该就会看到一堆红红的毛毛虫了，那我就不打扰各位修改的时间了

我们下次见，掰掰

参考文章:
https://cathalmacdonnacha.com/setting-up-eslint-prettier-in-vitejs