0.0.1-alpha.8 • Published 3 years ago

@fanioc/spec v0.0.1-alpha.8

Weekly downloads
-
License
GPL3
Repository
-
Last release
3 years ago

kspack-specification

一个包含 prettier,eslint,stylelint, husky, lintstaged, commitlint 的统一配置文件合集.

eslint 帮你发现js错误,提高js代码质量

stylelint 帮你发现css错误,提高css代码质量

prettier 帮你格式化代码,统一代码格式

husky与lintstaged 在提交代码前进行代码检查,提高线上代码质量

commitlint 帮你统一commit消息格式

Features

  • 实现js语法检查css语法检查代码格式美化, commit消息格式检查;
  • 仅安装当前一个 npm 包即可,无需其它任何依赖;
  • 支持reactvue2vue3工程;
  • 默认使用统一配置,也可以分别重载配置;

Install

npm install @es/kspack-specification --save-dev

或者

yarn add @es/kspack-specification -D

Configuration

创建以下配置文件,并按下面格式引入统一配置;

in .eslintrc.js

module.exports = {
    extends: [require.resolve('@es/kspack-specification/dist/eslintReact')],
    rules: {
        // your rules
    },
};

注意针对不同工程,请引入不同的 eslint 配置包

react 对应 eslintReact

vue2 对应 eslintVue2

vue3 对应 eslintVue3

in .stylelintrc.js

module.exports = {
    extends: [require.resolve('@es/kspack-specification/dist/stylelint')],
    rules: {
        // your rules
    },
};

in .prettierrc.js

const spec = require('@es/kspack-specification');

module.exports = {
    ...spec.prettier,
    // your rules
};

in .huskyrc.js

const spec = require('@es/kspack-specification');

module.exports = {
    ...spec.husky,
    // your rules
};

in .lintstagedrc.js

const spec = require('@es/kspack-specification');

module.exports = {
    ...spec.lintstaged,
    // your rules
};

in .commitlintrc.js

const spec = require('@es/kspack-specification');

module.exports = {
    ...spec.commitlint,
    // your rules
};

Example

使用示例,参与 kspack 模板工程 basic

如果是 react 项目,在你项目 package.json 的 script 中添加以下命令:

"lint": "npm run lint:js && npm run lint:css && npm run lint:format",
"lint:js": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache --cache-location node_modules/.cache/eslint/",
"lint:css": "stylelint --fix \"src/**/*.{less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:format": "prettier --write  \"src/**/*.{js,json,ts,tsx,css,less,scss,html,md}\"",

如果是 vue 项目,在你项目 package.json 的 script 中添加以下命令:

"lint": "npm run lint:js && npm run lint:css && npm run lint:format",
"lint:js": "eslint src --fix --ext .js,.jsx,.ts,.tsx,.vue --cache --cache-location node_modules/.cache/eslint/",
"lint:css": "stylelint --fix \"src/**/*.{less,postcss,css,scss,vue}\" --cache --cache-location node_modules/.cache/stylelint/",
"lint:format": "prettier --write  \"src/**/*.{js,json,ts,tsx,vue,css,less,scss,html,md}\"",