English | 中文

Front-end project eslint js/ts/vue/react code style specification configuration, node>=16 is recommended.

• Install dependencies

pnpm add -D eslint prettier @tomjs/eslint

• Modify the .eslintrc.{js,cjs} configuration as needed, such as

module.exports = {
  root: true,
  env: {
    es6: true,
  },
  extends: [require.resolve('@tomjs/eslint')],
};

Basic configuration, including eslint basic configuration, prettier, import, sort, etc.

Modify the .eslintrc.{js,cjs} configuration, such as

module.exports = {
  root: true,
  env: {
    es6: true,
  },
  extends: [require.resolve('@tomjs/eslint')],
};

pnpm add ---save-peer eslint prettier
pnpm add eslint-config-prettier eslint-plugin-import eslint-plugin-prettier eslint-plugin-simple-import-sort

• eslint-config-prettier: Turn off all rules that are unnecessary or may conflict with Prettier
• eslint-plugin-import: This plugin is designed to support ES2015+ (ES6+) import/export syntax hints and prevent file paths and imports Misspelled name issue
• eslint-plugin-simple-import-sort: import specification
• eslint-plugin-prettier: Compatible with prettier rules

Basic configuration, inherit default, add typescript support

Modify the .eslintrc.{js,cjs} configuration, such as

module.exports = {
  root: true,
  env: {
    es6: true,
  },
  extends: [require.resolve('@tomjs/eslint/typescript')],
};

pnpm add ---save-peer typescript
pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript

• @typescript-eslint/eslint-plugin: Tools to enable eslint and prettier to support TypeScript
• @typescript-eslint/parser: An eslint parser that parses TypeScript code into eslint-compatible nodes and provides support for TypeScript programs
• eslint-import-resolver-typescript: Added TypeScript support for eslint-plugin-import

vue project configuration, inherit default

Modify the .eslintrc.{js,cjs} configuration, such as

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
  },
  extends: [require.resolve('@tomjs/eslint/vue')],
};

pnpm add vue-eslint-parser eslint-plugin-vue

• vue-eslint-parser: Parse custom .vue files
• eslint-plugin-vue: The official eslint plug-in for vue.js

vue project configuration, inherits typescript and vue

Modify the .eslintrc.{js,cjs} configuration, such as

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
  },
  extends: [require.resolve('@tomjs/eslint/vue/typescript')],
};

react project configuration, inherit default

Modify the .eslintrc.{js,cjs} configuration, such as

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
  },
  extends: [require.resolve('@tomjs/eslint/react')],
};

pnpm add eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh

• eslint-plugin-react: react rules
• eslint-plugin-react-hooks: react hooks rules
• eslint-plugin-react-refresh: Verify that the component can refresh the update rules quickly and safely

React project configuration, inherits typescript and react

Modify the .eslintrc.{js,cjs} configuration, such as

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
  },
  extends: [require.resolve('@tomjs/eslint/react/typescript')],
};