#开源 #代码
💫 🌟 ESLint + Stylelint + Prettier 的代码风格配置集合,用于多项目共享配置,让你远离枯燥的配置工作。

#开源 #代码 💫 🌟 ESLint + Stylelint + Prettier 的代码风格配置集合,用于多项目共享配置,让你远离枯燥的配置工作。

Property
Oct 29, 2022 09:55 AM
Status
Date
URL
https://github.com/Codennnn/prefer-code-style
notion image

Prefer Code Style

别让重复的代码风格配置工作占用你的时间
notion image

想法起源

notion image
在许多项目中,我们都希望保持统一的代码风格。一般情况下,新建一个项目时我们会从零开始安装 ESLint、Stylelint、Prettier 依赖和它们的插件,然后再加入自己的个性化配置。但是,为什么要一遍又一遍地重复这些恼人的工作呢?!
notion image
显然,如果我们要从中解放自己,那就需要一个工具来帮助完成这些固定的工作,这就是 prefer-code-style 的职责所在了。

介绍

notion image
prefer-code-style 适用于 React 项目,它集成了常用的 ESLint、Stylelint、Prettier 配置,并且内置了一些主观偏好的格式配置,帮助你节省构建新项目时配置代码风格的时间,同时约定了各个项目统一的格式规范。

安装

notion image
yarn add -D prefer-code-style

用法

notion image
添加 .eslintrc.js,配置如下:
module.exports = {
 extends: [require.resolve('prefer-code-style/lib/eslint')],
}
添加 .stylelintrc.js,配置如下:
module.exports = {
 extends: [require.resolve('prefer-code-style/lib/stylelint')],
}
添加 .prettierrc.js,配置如下:
const { prettier } = require('prefer-code-style')

module.exports = {
 ...prettier,
}

搭配 VS Code 使用更佳

notion image
安装插件 VS Code ESLintvscode-stylelint
然后在 settings.json 中加入以下配置:
{
 "editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true,
 "source.fixAll.stylelint": true
 }
}
完成以上步骤后,你就能够获得更好的格式提示,并在保存文件时自动格式化你的代码,享受工具带来的便利吧
notion image

内置的插件/配置

notion image
prefer-code-style 内置了如下常用插件,让你免于安装和导入大量独立的包。如果这里面缺少你需要的,你仍然可以自行安装。
Details Details Details

相似项目

notion image