vue集成主流lint

1. 安装依赖

npm install --save-dev eslint-plugin-vue eslint-config-prettier stylelint stylelint-config-standard @commitlint/cli husky lint-staged

2. 配置eslint

• 在项目根目录下创建一个.eslintrc.js文件，并添加以下内容：

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    'prettier',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    // 添加/修改需要的规则
  },
};

• 在package.json文件中添加以下scripts：

"scripts": {
  "lint": "eslint --ext .js,.vue src",
  "lint:fix": "eslint --fix --ext .js,.vue src"
},

• 这里我们使用了vue3-recommended插件，如果是vue2项目，可以使用vue/recommended插件。

3. 配置StyleLint

• 在项目根目录下创建一个.stylelintrc.json文件，并添加以下内容：

{
  "extends": "stylelint-config-standard",
  "plugins": ["stylelint-order"],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations",
      "at-rules",
      "rules",
    ],
    "order/properties-alphabetical-order": true,
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
    "declaration-block-trailing-semicolon": "always",
    "declaration-block-single-line-max-declarations": 1,
    "selector-pseudo-element-colon-notation": "double",
    "selector-type-no-unknown": [
      true,
      {
        "ignore": ["custom-elements"],
      },
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["deep"],
      },
    ],
    "at-rule-no-unknown": false,
  }
}

• 在package.json文件中添加以下scripts：

"scripts": {
  "lint:css": "stylelint \"src/**/*.{vue,css,scss}\"",
  "lint:css:fix": "stylelint \"src/**/*.{vue,css,scss}\" --fix"
},

4. 配置commitLint

• 在项目根目录下创建一个commitlint.config.js文件，并添加以下内容：

module.exports = {
  extends: ['@commitlint/config-conventional'],
};

• 在package.json文件中添加以下scripts和husky配置：

"scripts": {
  "commitmsg": "commitlint -E HUSKY_GIT_PARAMS"
},
"husky": {
  "hooks": {
    "commit-msg": "npm run commitmsg"
  }
}

5. 配置prettier

• 在项目根目录下创建一个.prettierrc.js文件，并添加以下内容：

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  tabWidth: 2,
};

• 在package.json文件中添加以下scripts：

"scripts": {
  "format": "prettier --write \"src/**/*.{js,vue}\""
},

6. 配置lint-staged 在package.json文件中添加以下配置：

"lint-staged": {
  "src/**/*.{js,vue}": [
    "eslint --fix",
    "stylelint --fix"
  ]
}

在package.json文件中添加以下scripts和husky配置：

"scripts": {
  "precommit": "lint-staged"
},
"husky": {
  "hooks": {
    "pre-commit": "npm run precommit"
  }
}