Luoshen NPM | npm.io

luoshen

GitHub last commit GitHub all releases

洛神，中国古代神话中的人物，其形象十分美丽，“翩若惊鸿、婉若游龙、云髻峨峨、皓齿内鲜”。
以“洛神”命名，希望在繁琐复杂的前端样式规范配置中，减轻工作量，让前端格式化更简单更优美。
包含 Prettier，ESLint，Stylelint， TypeScript 的配置文件合集,并使用 husky 对 git 提交信息进行校验。

功能

React
TypeScript
nodejs
husky commit-msg
Vue

根据不同项目加载不同配置项，减少多余配置

使用

安装本包和 Prettier，ESLint，Stylelint,如果项目使用 TypeScript,则再安装 TypeScript,洛神会自动支持 TypeScript 的格式化.

npm install -D luoshen prettier eslint stylelint

配置 .eslintrc.js

module.exports = {
  extends: [require.resolve('luoshen/dist/eslint')],
  // vue 项目使用以下配置项
  // extends: [require.resolve('luoshen/dist/eslint-vue')],
  rules: {
    // your rules
  },
};

配置 .prettierrc.js

const luoshen = require('luoshen');

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

配置 .stylelintrc.js

module.exports = {
  extends: [require.resolve('luoshen/dist/stylelint')],
  rules: {
    // your rules
  },
};

配置 husky

安装husky

npm install -D husky

package.json 增加prepare命令

"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"
],