ESLint (Airbnb) + Prettier კონფიგურაცია React Native (Expo)-სთვის TypeScript-ში

რამდენიმე კვირა ვმუშაობდი ჩემს React Native პროექტში ლინტინგისა და ფორმატირების დამონტაჟებაზე, მაგრამ დიდ პროგრესს ვერ ვახერხებ. დავათვალიერე მრავალი სახელმძღვანელო და გავატარე მათ რაც შემეძლო, მაგრამ ჯერ კიდევ ჩანს გარკვეული დამონტაჟების პრობლემები.

ჩემი პროექტი აქვს Django ბეკენდით და React Native ფრონტენდით, ამიტომ React აპლიკაცია (ადგინებულ src/frontend დირექტორიაში) დაიწყო ამ გაკვეთილის გამოყენება აქ Expo, Yarn და TypeScript-ის გამოყენებით: https://reactnative.dev/docs/environment-setup.

ამ კონფიგურაციაში მეტი ცვლილება არ გაკეთებულა, და მე შევეცადე ESLint და Prettier-ის დამატება.

ეს ჩემი კონფიგურაციის ფაილებია:

1. .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  plugins: [
    '@typescript-eslint',
    'import',
    'react',
    'react-hooks',
    'react-native',
    'prettier',
  ],
  extends: [
    'airbnb-typescript',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  rules: {
    'no-use-before-define': 'off',
    '@typescript-eslint/no-use-before-define': ['error'],
    'prettier/prettier': 'error',
  },
};

2. .prettierrc.json

{
  "singleQuote": true
}

3. tsconfig.json

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {}
}

რამდენიმე მნიშვნელოვან ტრაბახს რომ ჩავწერო, რომლებსაც ვხვდები, მე ვიღებ import/namespace შეცდომას react-native-ში, სადაც წერია ';' მოსალოდნელი, ცვლადი გამოყენებულია განსაზღვრის წინ, როგორიცაა styles, და გაშიფრვის შეცდომა "parserOptions.project", რომელიც არის დაყენებული @typescript-eslint/parser-სთვის, ხოლო .eslintrc.js არ აღესაბამება პროექტის კონფიგურაციას.

პასუხი #1

მე დავასრულე tsconfig.eslint.json შექმნა ამ შინაარსით:

{
  "extends": "./tsconfig.json",
  "include": [".eslintrc.js", "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
}

და ასე parserOptions.project-ის ცვლილება 'tsconfig.eslint.json'-ზე გამოიხატა შედეგიანად.