Очень сложно всегда управлять одним и тем же стилем кода без каких-либо инструментов. Табуляции и пробелы всегда сбивают с толку, а кавычки и двойные кавычки тоже сбивают с толку.

Использование нескольких стилей кода в одном проекте создает путаницу среди участников. Это верно, даже если это проект, над которым вы работаете в одиночку.

Поэтому я начал использовать несколько инструментов:

  • ESLint: линтер javascript для поиска и исправления проблем в вашем коде.
  • Prettier: инструменты форматирования кода для унификации стиля кода
  • Husky: выполнять определенные действия при фиксации git (например, исправление eslint)
  • Lint-Staged: анализировать только те файлы, которые будут зафиксированы.

Эти инструменты делают ваш код JavaScript более красивым и гарантируют, что только красивый код будет передан в git. Я рекомендую использовать эти инструменты в вашем проекте JavaScript.

Тогда как вы можете добавить эти инструменты в свой проект? Если вы используете React или Express(Node), вам не о чем беспокоиться. Я уже написал стартовый код и залил его на GitHub:

Вам просто нужно клонировать этот репозиторий и заполнить его своим кодом.

Однако, если стартовый код недоступен, вам придется настроить его самостоятельно. Не беспокойтесь слишком сильно. Это не так сложно.

Давайте начнем.

Сначала создайте проект Node.js, выполнив следующую команду:

$ mkdir node-starter
$ cd node-stater
$ git init
$ npm init

Затем вам нужно установить зависимость:

# Install ESlint + Prettier
$ npm install eslint --save-dev
$ npm install prettier --save-dev --save-exact
# In case of conflict with Prettier, disable the setting
$ npm install eslint-plugin-prettier --save-dev
# Add config that use Prettier when formatting code
$ npm install eslint-config-prettier --save-dev
# Install Husky and Lint-Staged
$ npm install husky@4 --save-dev
$ npm install lint-staged --save-dev

ESlint также может импортировать конфиги, созданные другими разработчиками. здесь мы будем использовать конфиги Airbnb:

# Install the correct versions of each package, which are listed by the command:
$ npm info "eslint-config-airbnb-base@latest" peerDependencies
# if using npm 5+, use this shortcut
$ npx install-peerdeps --dev eslint-config-airbnb-base

Наконец, необходимо добавить установочный файл этих инструментов.

  • настройки git (.gitignore)
# .gitignore
node_modules/
  • Настройки ESlint (.eslintrc.json, .eslintignore)
# .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["prettier"],
  "extends": ["airbnb-base", "plugin:prettier/recommended"],
  "rules": {
    "no-console": "off",
    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "import/extensions": "off"
  }
}
# .eslintignore
node_modules/
  • Настройки Prettier (.prettierrc, .prettierignore)
# .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "avoid"
}
# .prettierignore
node_modules/
package.json
package-lock.json
  • Настройки хаски (.huskyrc.json)
# .huskyrc.json
{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}
  • Настройки Lint-Staged (.lintstagerc.json)
{
  "*.js": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{json,md}": [
    "prettier --write"
  ]
}

Теперь вся работа сделана. Создайте index.js для тестирования:

const hello = "Hello Node-Starter"
console.log(hello);

В настоящее время index.js использует двойные кавычки, а некоторые части не включают точку с запятой. Давайте зафиксируем это в Git и посмотрим на изменения:

$ git add .
$ git commit -s -m "Initial commit"
husky > pre-commit (node v14.15.3)
...

Если вы откроете index.js после git commit, вы увидите изменение, как показано ниже:

const hello = 'Hello Node-Starter';
console.log(hello);

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

Спасибо за ваше чтение! :)