liancheng-lint

简介

liancheng-lint集成了Eslint+Prettier配置，通过Eslint进行代码质量的校验，Prettier进行代码样式的格式化。目前支持普通js项目、React、vue、React+Typescript以及Vue+Typescript项目

用法

安装依赖（非ts项目无需安装typescript）

npm install eslint typescript liancheng-lint -D

或者：

yarn add eslint typescript liancheng-lint -D

.eslintrc.js配置

1、React项目（javascript）

module.exports = {
  extends: [require.resolve('liancheng-lint/react')],
  rules: {},
};

2、React+Typescript项目

module.exports = {
  extends: [require.resolve('liancheng-lint/typescript/react')],
  rules: {},
};

3、Vue项目（javascript）

module.exports = {
  extends: [require.resolve('liancheng-lint/vue')],
  rules: {},
};

4、Vue+Typescript项目

module.exports = {
  extends: [require.resolve('liancheng-lint/typescript/vue')],
  rules: {},
};

5、一般项目（javascript）

module.exports = {
  extends: [require.resolve('liancheng-lint')],
  rules: {},
};

集成vscode

1.vscode -> 设置 -> settings.json中配置

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "react",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "editor.formatOnSave": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

2.推荐通过在项目中添加.vscode/settings.json文件，配置同上

提交时执行校验

这里以React+Typescript项目为例，在package.json中配置：

"scripts": {
  "lint": "eslint '**/*.{js,jsx,tsx,ts}'",
  "lint:fix": "eslint '**/*.{js,jsx,tsx,ts}' --fix",
  "prettier": "prettier --write '**/*.{less,css,md,json}'",
},

"gitHooks": {
   "pre-commit": "lint-staged"
},
"lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "npm run lint:fix",
      "git add ."
    ],
    "*.{less,css,md,json}": [
      "npm run prettier",
      "git add ."
    ]
},