Быстрое исправление действий в VS Code для TypeScript с использованием Prettier - PullRequest
Новая
       59

Быстрое исправление действий в VS Code для TypeScript с использованием Prettier

0 голосов
/ 06 мая 2019

У меня есть настройка, компилирующая TypeScript через Babel. Кроме того, я настроил ESLint и Prettier для линтинга / форматирования. ESLint настроен на использование парсера с @typescript-eslint/parser - TSLint не задействован.

ESLint правильно применяет правила Преттиера и показывает мне волнистые линии в VS Code для обычного JavaScript и TypeScript. Однако только обычный JavaScript имеет какие-либо действия, доступные под опцией «Quick Fix ...» во всплывающей подсказке VS Code. Для файлов TypeScript всегда написано «Нет доступных действий кода» для проблем с Претти. Есть ли способ заставить быстрые исправления Преттье работать и с файлами TypeScript?

Вот мои файлы конфигурации:

.eslintrc 

{
  "extends": [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint",
    "prettier/react"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018,
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["@typescript-eslint"],
  "env": {
    "browser": true,
    "jest": true
  }
}

.prettierrc.js 

module.exports = {
  printWidth: 120,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
};

babel.config.js 

module.exports = api => {
  api.cache.invalidate(() => process.env.NODE_ENV === 'production');

  const presets = ['@babel/env', '@babel/typescript', '@babel/react'];

  const plugins = ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread'];

  if (process.env.NODE_ENV === 'development') {
    plugins.push('react-hot-loader/babel');
  }

  return {
    presets,
    plugins,
  };
};

1 Ответ

1 голос
/ 14 мая 2019

Это сработало для меня при добавлении в мои settings.json: 

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
],

Я не использую Преттиер в этом проекте, поэтому YMMV.

...