携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
- 本文参加了由公众号@若川视野 发起的每周源码共读活动， 点击了解详情一起参与。
- 这是源码共读的第35期，链接：juejin.cn/post/711356…
作用
It is a simple package to initialize Recommended ESLint and Prettier config for Vite Vue & React Projects.
用命令去安装和初始化vite项目的 ESLint和Prettier
先搞懂 ESLint 和 Prettier ：zhuanlan.zhihu.com/p/80574300
按我的草根理解，就是
ESLint检查代码质量和一部分风格，Prettier搞比较完整的代码风格。两者通常一起使用
使用
npm init vite-pretty-lint
从弹出的选项 选择 项目类型和包管理器 vue 、 npm
效果
多出.prettierrc.json和 .eslintrc.json等文件，里面有常见的配置，具体参考下面的链接
源码流程
询问项目类型和包管理器
用的是 enquirer 库，类似下面的代码就能实现问询。
import enquirer from 'enquirer';
export function askForProjectType() {
return enquirer.prompt([
。。。
{
type: 'select',
name: 'packageManager',
message: 'What package manager do you use?',
choices: ['npm', 'yarn', 'pnpm'],
},
]);
}
通过项目类型拿到对应模板
比如 vue
// lib/templates/vue.js
export const packages = ['vue-eslint-parser', 'eslint-plugin-vue'];
export const eslintOverrides = [
{
files: ['*.js'],
extends: ['eslint:recommended', 'plugin:prettier/recommended'],
},
{
files: ['*.vue'],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:prettier/recommended',
],
rules: {
'vue/multi-word-component-names': 'off',
},
},
];
构建安装依赖的命令
// 这些是必须安装的依赖，上面的packages是模板的依赖，组成packageList
export const commonPackages = [
'eslint',
'prettier',
'eslint-plugin-prettier',
'eslint-config-prettier',
'vite-plugin-eslint',
];
const commandMap = {
npm: `npm install --save-dev ${packageList.join(' ')}`,
yarn: `yarn add --dev ${packageList.join(' ')}`,
pnpm: `pnpm install --save-dev ${packageList.join(' ')}`,
};
确定vite配置文件
如果选vue则vite.config.js，vue.ts则vite.config.ts
修改vite配置文件
用到了ast解构，想详情看上面的参考链接
源码链接：github1s.com/tzsk/vite-p…
改的就比较细了，举个例子
//原
plugins: [react()]
})
// 改后
plugins: [react(), eslintPlugin()]
});
这里就不展开了
执行安装依赖
exec(`${commandMap[packageManager]}`, { cwd: projectDirectory }, (error) => {})
写入配置
fs.writeFileSync(eslintFile, JSON.stringify(eslint, null, 2));
fs.writeFileSync(prettierFile, JSON.stringify(prettierConfig, null, 2));
fs.writeFileSync(eslintIgnoreFile, eslintIgnore.join('\n'));
fs.writeFileSync(viteFile, viteConfig);
总结
这一块内容庞大，特别是 AST，都是值得深入的，还有eslint的配置也是深似海。
咱就是说，站巨人肩膀就行哈哈
