Идеальная конфигурация ESLint и Prettier для стилей, TypeScript и других типов файлов - PullRequest
Новая
       104

Идеальная конфигурация ESLint и Prettier для стилей, TypeScript и других типов файлов

0 голосов
/ 09 апреля 2020

Я новичок в теме lint, и у меня есть новый проект с Reaction, styled-components, typcript, ESLint, stylelint и prettier. Теперь я хочу создать идеальные конфиги, чтобы поучиться на них и использовать их в будущих проектах. Но я думаю, что мои конфиги не самые лучшие и, возможно, излишние или имеют неправильный порядок. Я надеюсь, что кто-то может взглянуть и дать мне советы, чтобы оптимизировать его. Я использую VSCode и расширения для ESLint, stylelint, Prettier и styled-компонентов, и это сработало. Код показывает ошибки и предупреждения ESLint и TS. Prettier должен затем отформатировать код с помощью конфигов ESLint и stylelint. Это работает большую часть времени. Но, возможно, вы можете помочь мне оптимизировать его (если конфиги не верны).

.eslintr c. js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./configs/tsconfig.json'],
  },
  plugins: [
    '@typescript-eslint',
    'eslint-comments',
    'react-hooks',
    'eslint-plugin-tsdoc',
    '@typescript-eslint/eslint-plugin',
  ],
  extends: [
    'airbnb-typescript',
    'prettier/@typescript-eslint',
    'plugin:@typescript-eslint/recommended',
    'plugin:eslint-comments/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
  ],
  rules: {
    'tsdoc/syntax': 'warn',
    'no-console': 'off',
    'no-alert': 'off',
    '@typescript-eslint/no-explicit-any': [0],
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'import/no-extraneous-dependencies': [2, { devDependencies: ['**/test.tsx', '**/test.ts'] }],
    'import/extensions': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'import/no-extraneous-dependencies': [2, { devDependencies: true }],
    "jsx-a11y/click-events-have-key-events": [0],
    "react/jsx-props-no-spreading": [0],
    "react/destructuring-assignment": [0],
    '@typescript-eslint/explicit-function-return-type': [
      0,
      {
        allowExpressions: true,
      },
    ],
    'prefer-destructuring': [0],
    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
        moduleDirectory: ['node_modules', 'src/'],
      },
    },
  },
};

.stylelintr c

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-airbnb",
    "stylelint-config-styled-components",
    "stylelint-config-prettier"
  ],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
  }
}

tsconfig. json

{
  "compilerOptions": {
    "outDir": "../dist",
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom", "esnext.asynciterable"],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "../src/",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictNullChecks": true,
    "declaration": true,
    "types": ["react", "jest"],
    "resolveJsonModule": true
  },
  "include": ["../src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*/*.test.ts",
    "examples"
  ]
}

.prettierr c

{
  "trailingComma": "es5",
  "printWidth": 100,
  "singleQuote": true,
  "prettier.eslintIntegration": true
}

Я хочу использовать лучшие практики для стиля кода, поэтому я использую airbnb правила.

Мои зависимости: 

"@typescript-eslint/eslint-plugin": "^2.25.0",
"@typescript-eslint/parser": "^2.25.0",
"prettier": "^1.19.1",
"prettier-eslint": "^9.0.1",
"prettier-eslint-cli": "^5.0.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-airbnb-typescript": "^7.0.0",
"eslint-config-prettier": "^6.10.0",
"eslint-config-react-app": "^5.2.0",
"eslint-import-resolver-typescript": "^2.0.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-eslint-comments": "^3.1.2",
"eslint-plugin-flowtype": "^4.7.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jest": "^23.8.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^2.5.0",
"eslint-plugin-tsdoc": "^0.2.3",
"stylelint": "^13.0.0",
"stylelint-config-airbnb": "^0.0.0",
"stylelint-config-prettier": "7.0.0",
"stylelint-config-recommended": "^3.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-order": "^4.0.0",
"stylelint-prettier": "^1.1.2",
"stylelint-processor-styled-components": "^1.9.0",
"stylelint-scss": "^3.15.0",

Я ищу ваш опыт и полезные советы.

И есть ли хороший способ линтовать. json,. файлы md, .mdx, .yml, .yaml,. html? Иметь линтера, который все ворсирует. Можно ли добиться этого с помощью eslint в сочетании с @ typescript-eslint?

Большое спасибо!

...