Блог

Я установил расширение Eslint-Prettier в VSCode. У меня уже есть .eslintrc.js и мой форматировщик по умолчанию (Eslint-prettier) не форматирует в соответствии с моими правилами eslint.

Например: когда я набираю npm, запускаю eslint. —исправление удаляет все точки с запятой, но после того, как я нажал CTRL V, prettier снова добавляет точки с запятой..

Все работало хорошо, пока я не отформатировал свой компьютер. Кто-нибудь может мне помочь?

мой .eslintrc.js содержимое файлов — это

 module.exports = {
  env: {
    node: true,
    es6: true,
    browser: true
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
      modules: true,
      experimentalObjectRestSpread: true
    }
  },
  rules: {
    "no-console": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",

    // Best Practices
    eqeqeq: "error",
    "no-invalid-this": "error",
    "no-return-assign": "error",
    "no-unused-expressions": ["error", { allowTernary: true }],
    "no-useless-concat": "error",
    "no-useless-return": "error",

    // Variable
    // 'init-declarations': 'error',
    "no-use-before-define": "error",

    // Stylistic Issues
    "array-bracket-newline": ["error", { multiline: true, minItems: null }],
    "array-bracket-spacing": "error",
    "brace-style": ["error", "1tbs", { allowSingleLine: true }],
    "block-spacing": "error",
    "comma-dangle": "error",
    "comma-spacing": "error",
    "comma-style": "error",
    "computed-property-spacing": "error",
    "func-call-spacing": "error",
    "implicit-arrow-linebreak": ["error", "beside"],
    // indent: ['error', 4],
    "keyword-spacing": "error",
    "multiline-ternary": ["error", "never"],
    // 'no-lonely-if': 'error',
    "no-mixed-operators": "error",
    "no-multiple-empty-lines": ["error", { max: 2, maxEOF: 1 }],
    "no-tabs": "error",
    "no-unneeded-ternary": "error",
    "no-whitespace-before-property": "error",
    "nonblock-statement-body-position": "error",
    "object-property-newline": [
      "error",
      { allowAllPropertiesOnSameLine: true }
    ],
    "quote-props": ["error", "as-needed"],
    // quotes: ['error', 'prefer-single'],
    semi: ["error", "never"],
    "semi-spacing": "error",
    "space-before-blocks": "error",
    // 'space-before-function-paren': 'error',
    "space-in-parens": "error",
    "space-infix-ops": "error",
    "space-unary-ops": "error",

    // ES6
    "arrow-spacing": "error",
    "no-confusing-arrow": "error",
    "no-duplicate-imports": "error",
    "no-var": "error",
    "object-shorthand": "error",
    "prefer-const": "error",
    "prefer-template": "error"
  }
}

 

Вы можете видеть, что eslint говорит, что нет завершающей комы, после того, как я щелкну правой кнопкой мыши по одному из них и исправлю все автоматически исправляемые проблемы, проблемы исчезнут, но после сохранения расширения файла prettier они снова появятся.

1. Установите eslint:

    npm i --save-dev eslint
    

2. Инициализация eslint:

    npx eslint --init
    

   Для некоторых параметров вам нужно выбрать следующий:

   • Как бы вы хотели использовать ESLint?
   • Чтобы проверить синтаксис и найти проблемы
   • В каком формате вы хотите, чтобы ваш конфигурационный файл был?
   • JavaScript
3. Установите prettier:

    npm i --save-dev eslint-config-prettier eslint-plugin-prettier prettier 
    

4. Создать .prettierrc конфигурационный файл:

     {
        "printWidth": 80,
        "singleQuote": true,
        "trailingComma": "es5"
    }
    

Теперь вы можете проверить стиль с помощью eslint и исправить стиль с помощью prettier из командной строки.

Для интеграции VSCode с eslint и prettier вам необходимо установить один из:

1. esbenp.prettier-vscode.
2. dbaeumer.vscode-eslint;

После этого вам нужно установить это расширение в качестве средства форматирования по умолчанию:

1. Открыть палитру команд ctrl shift p ;
2. Выберите Format Document With... ;
3. Выберите Configure Document With... ;
4. Выберите Prettier - Code Formatter или ESLint на основе ваших предпочтений.

Теперь eslint будет работать как linter, а prettier — как форматировщик:

Вкладка проблемы с VSCode:

вывод eslint

Если я сохраню файл, все проблемы с prettier будут исправлены (автоформат при сохранении должен быть включен)

Плагин Eslint не применяет автоматические изменения в настройках, расположенных в .prettierrc . Смотрите Вопрос на github. Чтобы исправить это, вы можете:

• переместить .prettierrc содержимое в .eslint (не рекомендуется, потому что плагины prettier иногда не читают этот файл);
• запустите из командной панели в VSCode ESLint: Restart ESLint server после редактирования. prettierrc файл.