Luoshen Npm包快捷格式化统一代码

代码规范 npm prettier eslint husky stylelint

发布时间 : 2023-02-20 13:49

阅读 :

前言
使用方法
1. 安装依赖
2. 配置
编辑器设置
1. VS Code
结语

前言

日常开发中，在新起项目时会涉及到代码格式化的问题，现在通用的方式是ESLint+Prettier的方式，这种方式方便快捷，再搭配git hook等使用也能很好地统一团队中不同的风格需求和习惯。
但每次有新项目都需要把配置重新设置一遍，最差的情况也要复制、粘贴一下，浪费时间。为了节省在这方面的心智，便想着开发一个npm包，每次安装一次，通过简单的配置就能使项目风格统一，于是便有了这个小工具的诞生。

luoshen是一个npm包，使用ESlint+Prettier+StyleLint+Husky实现的对前端项目格式化进行配置精简化，并通过husky在提交代码时进行commit信息校验和代码格式化检查。目前支持React、Vue、TypeScript、nodejs、css/less/scss等前端语言的项目。另外可再完全配置符合自己的各种格式化规范。

luoshen即洛神，中国古代神话中的人物，其形象十分美丽，“翩若惊鸿、婉若游龙、云髻峨峨、皓齿内鲜”。以“洛神”命名本项目，希望在繁琐复杂的前端样式规范配置中，减轻工作量，让前端格式化更简单更优美。

使用方法

安装依赖

npm i luoshen eslint prettier stylelint husky -D

配置

.eslintrc.js

module.exports = {
  extends: [require.resolve('luoshen/dist/eslint')],
  // vue 项目使用以下配置项
  // extends: [require.resolve('luoshen/dist/eslint-vue')],
  rules: {
    // 此处配置luoshen规范外您喜欢的规则
  },
};

.prettierrc.js

const luoshen = require('luoshen');

module.exports = {
  ...luoshen.prettier,
};

.stylelintrc.js

module.exports = {
  extends: [require.resolve('luoshen/dist/stylelint')],
  rules: {
    // 此处配置luoshen规范外您喜欢的规则
  },
};

husky配置

在package.json文件中新增一下命令：

"script":{
  "prepare": "husky install"
}

然后运行npm run prepare 或者直接运行以下命令：

 npm pkg set scripts.prepare="husky install"
 npm run prepare

增加commit-msg验证

npx husky add .husky/commit-msg 'npx luoshen verify-commit "$1"'

编辑器设置

项目文件配置好后,设置编辑器,便可以在每次保存时自动格式化。

VS Code

安装ESLint、Prettier和StyleLint插件
formatOnSave 关闭

editor.codeActionsOnSave 修改

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
},

stylelint.validate内增加 vue支持

 "stylelint.validate": [
   "css",
   "less",
   "postcss",
   "vue"
 ],

结语

这是一个根据个人兴趣开发的个人项目，其中受能力限制，难免有诸多错误和考虑不全的地方，如果您有时间希望提出问题并指正，也可一块开发。开源地址https://github.com/imchaoyu/luoshen

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 chaoyumail@126.com