07.11.2023 в 21:49

Добавляем Prettier и Linter

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

Eslint используется для поиска и устранения проблем с кодом JavasScript, а мой проект написан на Typescript, но он все еще доступен, пока настроена конфигурация.

Установка Prettier

1. Для установки введите команду:

npm install --save-dev prettier

2. Создайте файл .prettierrc и добавьте следующее:

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

3. Настройте Prettier на игнорирование определенных файлов

node_modules

4. Добавьте команду в ваш package.json

        "prettier": "npx prettier --write .",
        "prettier-check": "npx prettier . --check",

Prettier — это перезаписывать файлы, а prettier-check — только проверять файлы.

Установка Eslint

1. Для уствновки Eslint введите команду

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. Создайте файл .eslintrc

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ]
}

3. Создайте файл .eslintignore

node_modules
dist

4. Добавьте команду в ваш package.json

"lint": "eslint . --ext .ts",
"lint-fix": "eslint . --ext .ts --fix",

lint предназначен для проверки только всех файлов .ts, тогда как lint-fix предназначен для проверки и исправления файлов.

Инструмент интеграции с VScode

Создайте файл Settings.json в формате .vscode.

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

Учитесь на процессе

Раньше я пару раз устанавливал Prettier и Eslint для проектов с открытым исходным кодом, но с этого времени я полностью понял, как использовать форматтер и почему он необходим для многих проектов с открытым исходным кодом. До того, как я использовал форматтер для этого проекта, я не обнаружил никаких проблем или неувязок, но после его установки я понял, что есть несколько незначительных проблем, с которыми я столкнулся. Я бы сказал, что этот форматтер очень важен для каждого разработчика, и мы должны использовать его, чтобы избежать мелких проблем, тогда мы сможем сосредоточиться только на программировании.

Источник:

Selected Sort Option