matrix-the-one / great-harmony

A lint configuration library containing ESlint, Stylelint, Prettier, TSConfig configurations for React, Vue projects.

English | 中文

great-harmony

A lint configuration library containing ESlint, Stylelint, Prettier, TSConfig configurations for React, Vue projects.

Installation

npm install great-harmony --save-dev

Usage

• Eslint: Add the following configuration to the .eslintrc.js file.

  • The default is to use Vue2 (JS) rules, if you need to use Vue3 (TS) rules, please change to great-harmony/eslint/vue3.

module.exports = {
  extends: require.resolve('great-harmony/eslint'),
  rules: {
    /* You can rewrite the rules here */
  },
}

• Stylelint: Add the following configuration to the .stylelint.js file.

module.exports = {
  extends: require.resolve('great-harmony/stylelint'),
  rules: {
    /* You can rewrite the rules here */
  },
}

• Prettier: Add the following configuration to the .prettier.js file.

module.exports = require('great-harmony/prettier')

If the rules need to be rewritten.

module.exports = {
  ...require('great-harmony/prettier'),
  /* You can rewrite the rules here */
}

• TSConfig: Add the following configuration to the tsconfig.json file.

{
  "extends": "great-harmony/tsconfig/base.json",
  /* You can rewrite the rules here */

  /* You can modify the following configuration according to your project */
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src", "mock", "test", "typings", "config"],
  "exclude": ["node_modules", "build", "dist", "scripts", "webpack", "jest"]
}

• VSCode: First you need to install ESlint, Stylelint, Prettier plugins, and then add the following configuration to the settings.json file with the following configuration.

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "stylelint.snippet": ["css", "less", "scss", "sass", "postcss", "vue"],
  "stylelint.validate": ["css", "less", "scss", "sass", "postcss", "vue"]
}

VSCode Global Usage

• Global Installation.

npm install great-harmony -g

• VSCode: First you need to install ESlint, Stylelint, Prettier plugins, and then add the following configuration to the settings.json file with the following configuration.

  • Please replace $path with the directory where the npm global package is installed on your computer, you can use npm prefix -g command to see it.
  • If you use Less, replace the value of stylelint.customSyntax with postcss-less.

{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  /* eslint */
  "eslint.nodePath": "$path/node_modules/great-harmony/node_modules",
  "eslint.options": {
    "ignorePath": "$path/node_modules/great-harmony/.eslintignore",
    "overrideConfigFile": "$path/node_modules/great-harmony/eslint/index.js"
  },
  /* stylelint */
  "stylelint.customSyntax": "postcss-scss",
  "stylelint.snippet": ["css", "less", "scss", "sass", "postcss", "vue"],
  "stylelint.validate": ["css", "less", "scss", "sass", "postcss", "vue"],
  "stylelint.configBasedir": "$path/node_modules/great-harmony",
  "stylelint.configFile": "$path/node_modules/great-harmony/stylelint/index.js",
  "stylelint.stylelintPath": "$path/node_modules/great-harmony/node_modules/stylelint",
  /* prettier */
  "prettier.configPath": "$path/node_modules/great-harmony/prettier/index.js"
}

• Tips:

  • There is a conflict between the global use of VSCode and the local use of the project, just choose one of the usage methods.
  • VSCode global use of Stylelint is not yet ready in Vue projects.

License

MIT

Copyright (c) 2022 Matrix-The-One