Skip to content

IrenCore/code-style-lint

Repository files navigation

code-style-lint

Code style lint config for front-end project. No more tedious eslint and prettier configuration of your project. 😛

  • eslint
  • prettier
  • stylelint(vue-scss react-scss)

Scaffolding creation

Single ingestion

Demo

Code-style-lint-react-ts

laoer536/vite3.0-react18-TypeScript-router-dom6-mobx6-Eslint-prettier-template: 这是一个vite3-react18-react-TypeScript-router-dom6-mobx6-Eslint-prettier-husky模板项目 (github.com)

//.eslintrc
 {
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "./.eslintrc-auto-import.json",
    "code-style-lint-react-ts"
  ],
  "rules": {}
}

Code-style-lint-vue3-ts

laoer536/vite3.0-vue3.2-TypeScript-Pinia-sass-eslint-prettier-template: 这是一个vite2.6-vue3.2-TypeScript-less-eslint-prettier模板项目 (github.com)

//.eslintrc
 {
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "./.eslintrc-auto-import.json",
    "code-style-lint-vue3-ts"
  ],
  "rules": {
    "vue/multi-word-component-names": "off"
  }
}

How to use

  • For javascript project

    //npm
    npm install eslint-config-code-style-lint eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint"]
      //...
    }
  • For typescript project

    //npm
    npm install eslint-config-code-style-lint-ts eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint-ts eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint-ts eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint-ts"]
      //...
    }
  • For vue3-typescript project

    //npm
    npm install eslint-config-code-style-lint-vue3-ts eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint-vue3-ts eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint-vue3-ts eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint-vue3-ts"]
      //...
    }
  • For vue3-javascript project

    //npm
    npm install eslint-config-code-style-lint-vue3 eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint-vue3 eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint-vue3 eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint-vue3"]
      //...
    }
  • For react-typescript project

    //npm
    npm install eslint-config-code-style-lint-react-ts eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint-react-ts eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint-react-ts eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint-react-ts"]
      //...
    }
  • For react-javascript project

    //npm
    npm install eslint-config-code-style-lint-react eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint-react eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint-react eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint-react"]
      //...
    }
  • For nuxt3-typescript project

    //npm
    npm install eslint-config-code-style-lint-nuxt3-ts eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint-nuxt3-ts eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint-nuxt3-ts eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint-nuxt3-ts"]
      //...
    }
  • For nuxt3-javascript project

    //npm
    npm install eslint-config-code-style-lint-nuxt3 eslint@8.57.1 prettier -D
    //pnpm 
    pnpm install eslint-config-code-style-lint-nuxt3 eslint@8.57.1 prettier -D
    //yarn
    yarn add eslint-config-code-style-lint-nuxt3 eslint@8.57.1 prettier -D

    Create a '.eslintrc' file to your project root

    {
      //...
      "extends": ["code-style-lint-nuxt3"]
      //...
    }

Alternatively, if you would like to add 'stylelint' to your project, please execute add-stylelint and wait for a moment. The required dependencies for 'stylelint' will be automatically installed for you based on your project and a configuration file will be generated for you.(Currently, only Vue-scss and React-scss projects are supported)

⚠️ Warning: Confirm that your ESLint version cannot be greater than or equal to 9.