В этом сообщении блога показано, как настроить VS Code с TypeScript, Prettier и ESLint.

Кто они такие?

VS Code (он же Visual Studio Code или просто Код) - это IDE с открытым исходным кодом от Microsoft. Https://code.visualstudio.com/

TypeScript - это язык программирования, который обеспечивает безопасность типов в JavaScript. Он компилируется в JavaScript для использования в браузерах и на серверах. Https://www.typescriptlang.org/

Prettier - это средство форматирования для многих языков, ориентированных на Интернет (включая TypeScript), которое сообщает вам, когда вы нарушили стилистическое правило. Https://prettier.io/

ESLint - это линтер для TypeScript и JavaScript, который понимает эти языки и сообщает вам, когда вы нарушили синтаксическое правило. Https://eslint.org/

Какая здесь цель?

Цель состоит в том, чтобы иметь производительную и удобную для пользователя среду разработки, которая может:

  • Сохраняйте безопасный тип кода
  • Автоформат уродливого кода
  • Выделите потенциальные проблемы с кодом

Настройка VS Code и TypeScript

VS Code имеет первоклассную поддержку TypeScript, так что это просто.

  • Откройте VS Code
  • Вы должны увидеть «инструменты и языки» - нажмите «машинописный текст».
  • В вашем терминале: npm install -D typescript

Настройка Prettier

  • Получите более красивое расширение (Prettier — Code formatter через торговую площадку расширений в VS Code)
  • Откройте settings.json - вы можете сделать это с помощью панели команд (Просмотр ›Панель команд, затем введите settings.json и нажмите Enter)
  • Вставьте этот параметр: “editor.formatOnSave”: true - это заставит VS Code форматировать каждый файл по мере его сохранения.
  • Теперь вам нужно установить средства форматирования по умолчанию для файлов, которые вы используете, поэтому вставьте следующие параметры конфигурации по мере необходимости:
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
  • Сохраняем settings.json
  • Добавьте файл .prettierrc в свой корневой каталог
  • Этот файл содержит все ваши более красивые варианты, мой выглядит так:
{
  "singleQuote": true,
  "printWidth": 120
}
  • Возможно, вам потребуется перезапустить VS Code, чтобы изменения вступили в силу.

Настройка ES Lint

ES Lint и Prettier имеют некоторые схожие функции, поэтому нам понадобится дополнительная конфигурация, чтобы гарантировать, что они не конфликтуют друг с другом.

Если вам интересно, почему мы используем ESLint, а не TSLint - прочтите это.

  • Получите расширение ESlint (ESLint через торговую площадку расширений в VS Code)
  • Добавьте .eslintrc.js файл в свой корневой каталог
  • Этот файл будет содержать все ваши правила TypeScript (ESLint поставляется без правил по умолчанию). Он также будет содержать конфигурацию, чтобы убедиться, что он не конфликтует с Prettier). Мой выглядит так:
module.exports = {
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended'
  ],
  rules: {
    '@typescipt-eslint/interface-name-prefix': ['always'],
    'no-underscore-dangle': 'error'
  }
};
  • Возможно, вам потребуется перезапустить VS Code, чтобы изменения вступили в силу.

Все готово!

Эти инструменты постоянно меняются, поэтому, если что-то не работает, свяжитесь с нами через наш веб-сайт, чтобы мы могли помочь :-)

В App Sapiens мы используем TypeScript каждый день, чтобы предоставлять эти преимущества нашим клиентам. Если вы хотите узнать больше о том, как увеличить скорость, не срезая углы в своем проекте, обратитесь через наш веб-сайт.