eslint

npm i eslint

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
  },
  extends: ['eslint:recommended'],
}

使用extends: ['eslint:recommended']开启所有基本设置

ts eslint

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

@typescript-eslint/eslint-plugin (opens new window)是消费者使用的核心ESLint 插件， (opens new window)用于从 typescript-eslint 加载自定义规则和规则配置列表。

@typescript-eslint/parser (opens new window)接受 ESLint 配置设置，读取 TypeScript 源文本，并生成 ESTree AST。这是必要的，因为 TypeScript 生成的 AST 格式与 ESLint 工作所需的格式不同，不兼容。

module.exports = {
  extends: [
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['@typescript-eslint'],
  rules: {
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
  },
}

设置导出顺序

npm i -D eslint-plugin-import

  extends: [
    'plugin:import/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
  ],
  plugins: ['import'],
  rules: {
    'import/named': 2,
    'import/namespace': 2,
    'import/default': 2,
    'import/export': 2,
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'internal'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
        ],
        'newlines-between': 'never',
        pathGroupsExcludedImportTypes: ['react'],
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
        warnOnUnassignedImports: true,
      },
    ],
  },

Prettier

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

• eslint-config-prettier 的作用是关闭eslint中与prettier相互冲突的规则。
• eslint-plugin-prettier 的作用是赋予eslint用prettier格式化代码的能力。

module.exports = {
  extends: [
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
}

EditorConfig

设置关于浏览器的一些编码风格，比如缩进是4个空格而不是4个tab等等。

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

stylelint

npm install --save-dev stylelint stylelint-config-standard

- stylelint-order — 排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)

分别推荐^13.8.0 ^20.0.0

// stylelintrc.js
module.exports = {
  extends: "stylelint-config-standard",
}

当处理less等语言时

npm install --save-dev postcss-less

// stylelintrc.js
module.exports = {
  customSyntax: "postcss-less",
  extends: "stylelint-config-standard",
}

让他作用在styled-components中

npm install -D stylelint-config-styled-components

module.exports = {
  extends: ["stylelint-config-styled-components"],
};

tailwind

兼容umi中postcss7的使用

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

// config.js
export default defineConfig({
  extraPostCSSPlugins: [
    require('tailwindcss'),
    require('postcss-nested'),
    require('autoprefixer'),
  ],
})
// app.ts
import 'tailwindcss/tailwind.css'

vscode

{
  // eslint设置
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "typescript",
    "typescriptreact"
  ],
  "editor.formatOnSave": false,
  // 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
}