В этом сообщении блога показано, как настроить 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 каждый день, чтобы предоставлять эти преимущества нашим клиентам. Если вы хотите узнать больше о том, как увеличить скорость, не срезая углы в своем проекте, обратитесь через наш веб-сайт.