1

Our project in company uses .js files and eslint is used for formatting. now we are transforming our app slowly to use .ts and .tsx files so I enabled prettier formatting in .ts and .tsx files only but before we use prettier we configured special rules for typescript files in eslint as following :

  overrides: [
    // Match TypeScript Files
    // =================================
    {
      files: ['**/*.{ts,tsx}'],

      // Parser Settings
      // =================================
      // allow ESLint to understand TypeScript syntax
      // https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/lib/shared.js#L10
      parser: '@typescript-eslint/parser',
      parserOptions: {
        project: './tsconfig.json',
      },

      // Extend Other Configs
      // =================================
      extends: [
        'airbnb',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/typescript',
      ],
      rules: {
        ...rules,
        'react/jsx-uses-react': 'off',
        'react/react-in-jsx-scope': 'off',
        '@typescript-eslint/space-before-blocks': 'error',
        '@typescript-eslint/no-unused-vars': 'error',
        '@typescript-eslint/explicit-function-return-type': 'error',
        '@typescript-eslint/no-unsafe-return': 'warn',
        '@typescript-eslint/padding-line-between-statements': [
          'error',
          {
            blankLine: 'always',
            prev: ['interface', 'type'],
            next: '*',
          },
        ],
        '@typescript-eslint/member-delimiter-style': [
          'error',
          {
            multiline: {
              delimiter: 'none',
              requireLast: false,
            },
            singleline: {
              delimiter: 'comma',
              requireLast: false,
            },
          },
        ],
        '@typescript-eslint/type-annotation-spacing': 'error',
      },

and in .prettierrc file I did the following :

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "arrowParens": "always",
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSameLine": false,
  "bracketSpacing": true
}

so prettier for example adds semicolon at end of each line while this rule in .eslint

'@typescript-eslint/member-delimiter-style': [
          'error',
          {
            multiline: {
              delimiter: 'none',
              requireLast: false,
            },
            singleline: {
              delimiter: 'comma',
              requireLast: false,
            },
          },

doesn't require the line to end with semicolon when declaring types and interface and many other rules conflicts also in eslint when adding multilpe empty lines in file it should show error so how I can do that with prettier?

Nagween Jaffer
  • 180
  • 3
  • 13

1 Answers1

0

You may need to change your default formatter for vscode to eslint. You can install the eslint extension and prettier Eslint.

ESlint plugin view

If you are on mac this can be achieved by going to:

Code -> Preferences -> Settings -> Search for Default formatter -> change it to Eslint (dbaeumer.vscode-eslint).

You may also need to change your default formatter. You can achieve this by right-clicking in your screen -> Click on format document with.. -> configure default formatter

Eslint settings selection

Craques
  • 953
  • 1
  • 8
  • 16