Тази публикация в блога ви показва как да настроите 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 всеки ден, за да предоставим тези предимства на нашите клиенти. Ако искате да научите повече за това как да увеличите скоростта, без да пречиствате на вашия проект, моля, свържете се чрез нашия уебсайт.