imchaoyu / luoshen

a perfect front-end style rules like the Luo Shen of China

luoshen

洛神，**古代神话中的人物，其形象十分美丽，“翩若惊鸿、婉若游龙、云髻峨峨、皓齿内鲜”。

以“洛神”命名，希望在繁琐复杂的前端样式规范配置中，减轻工作量，让前端格式化更简单更优美。

包含 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

  1. 安装husky

  npm install -D husky

  2. package.json 增加prepare命令

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

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

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

  3. 添加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"
],