npm, package.json та інструменти розробки

ESLint та Prettier: якість коду

📖 Теорія

ESLint — статичний аналізатор JavaScript.

💡 Приклад коду

Встановлення: npm install -D eslint
Ініціалізація: npx eslint --init

.eslintrc.json:
{
  "env": { "browser": true, "es2022": true, "node": true },
  "extends": ["eslint:recommended"],
  "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
  "rules": {
    "no-unused-vars": "warn",
    "no-console":     "off",
    "eqeqeq":         ["error", "always"],
    "no-var":         "error",
    "prefer-const":   "warn",
    "semi":           ["error", "always"]
  }
}

Prettier — форматування коду.

.prettierrc:
{
  "semi":          true,
  "singleQuote":   true,
  "tabWidth":      2,
  "trailingComma": "es5",
  "printWidth":    100,
  "arrowParens":   "avoid"
}

.eslintignore / .prettierignore:
node_modules/
dist/
build/
*.min.js

VS Code інтеграція:
// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Вивід:

← Попередній урок Наступний урок →