Анализ и линтинг кода JavaScript: ESLint, Prettier и JSHint

// Код без линтинга - потенциальные проблемы
function getUserData(id)
{
    var userData = fetchData(id);  // Устаревший var
    if (userData.status == "active")  // Нестрогое сравнение
    userData.lastLogin = new Date();  // Отступы не соблюдены
    return userData
}  // Отсутствие точки с запятой

// Тот же код после линтинга
function getUserData(id) {
    const userData = fetchData(id);
    if (userData.status === "active") {
        userData.lastLogin = new Date();
    }
    return userData;
}

// Код, который не пройдёт проверку JSLint
function example() {
    return              // JSLint выдаст ошибку из-за переноса строки
    {
        value: true     // (автоматическая вставка точки с запятой)
    };
}

// До ESLint с автофиксом
var x = 5;
if(x==5){
console.log("Equal");
}
 
// После автофикса
const x = 5;
if (x === 5) {
    console.log("Equal");
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    'indent': ['error', 2],
    'linebreak-style': ['error', 'unix'],
    'quotes': ['error', 'single'],
    'semi': ['error', 'always']
  }
};

{
  "rules": {
    "no-console": "warn",      // Предупреждение при использовании console
    "no-unused-vars": "error", // Ошибка при неиспользуемых переменных
    "eqeqeq": "off"            // Отключение требования строгого равенства
  }
}

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

{
  "rules": { /* общие правила */ },
  "overrides": [
    {
      "files": ["*.test.js", "*.spec.js"],
      "rules": {
        "no-unused-expressions": "off" // Отключаем для тестовых файлов
      }
    }
  ]
}

node_modules/
dist/
build/
coverage/

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      }
    ]
  }
}

on
{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "precommit": "npm run lint"
  }
}

// Без ESLint
function fetchData() {
  return new Promise((resolve, reject) => {
    // Забыли вернуть результат из колбэка
    callApi().then(data => {
      processData(data);
    });
  });
}
 
// ESLint предупредит об отсутствии return в колбэке

// Неоптимально
async function getData() {
  return await fetchData(); // Избыточное await
}
 
// Оптимально
async function getData() {
  return fetchData();
}

// .eslintrc.js для TypeScript-проекта
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    project: './tsconfig.json' // Путь к файлу tsconfig
  }
};

// .eslintrc.js для React-проекта
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended'
  ],
  plugins: ['react', 'jsx-a11y'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: 'detect' // Автоматически определять версию React
    }
  }
};

// .eslintrc.js
module.exports = {
  rules: {
    // Все правила только предупреждают, но не блокируют сборку
    'indent': ['warn', 2],
    'no-unused-vars': 'warn'
    // ...другие правила
  }
};

// Неделя 1: только критичные правила
{
  "rules": {
    "no-unused-vars": "error",
    "no-undef": "error"
    // Остальные пока отключены
  }
}
 
// Неделя 2: добавляем правила форматирования
// И так далее

{
  "rules": {
    // Предотвращает утечки памяти в замыканиях
    "no-unused-vars": "error",
    
    // Помогает избежать проблем с асинхронным кодом
    "no-async-promise-executor": "error"
  }
}

/**
 * @fileoverview Пример документированного правила ESLint
 * @author Ваша Команда
 *
 * Это правило предотвращает распространённую ошибку при работе с async/await,
 * когда разработчики забывают обрабатывать ошибки, что может привести к "проглатыванию"
 * исключений и трудноотлавливаемым багам.
 *
 * Пример НЕПРАВИЛЬНОГО кода:
 *
 * async function fetchData() {
 *   const data = await api.getData(); // Если здесь будет ошибка, она будет проигнорирована
 *   return process(data);
 * }
 *
 * Пример ПРАВИЛЬНОГО кода:
 *
 * async function fetchData() {
 *   try {
 *     const data = await api.getData();
 *     return process(data);
 *   } catch (error) {
 *     logger.error('Ошибка получения данных', error);
 *     throw error; // Переброс ошибки или другая обработка
 *   }
 * }
 */

module.exports = {
  rules: {
    "my-custom-rule": {
      create: function(context) {
        // Логика правила
        return {
          // Обработчики AST-узлов
        };
      }
    }
  }
};

{
  "plugins": ["react", "my-plugin"],
  "rules": {
    "react/jsx-uses-vars": "error",
    "my-plugin/my-custom-rule": "warn"
  }
}

module.exports = {
  create: function(context) {
    return {
      // Вызывается для каждого объявления функции
      FunctionDeclaration: function(node) {
        // Проверяем условия и сообщаем об ошибках
        if (hasIssue(node)) {
          context.report({
            node: node,
            message: "Описание проблемы",
            fix: function(fixer) {
              // Опциональный автофикс
              return fixer.replaceText(node, fixedCode);
            }
          });
        }
      }
    };
  }
};

// no-short-vars.js
module.exports = {
  meta: {
    type: "suggestion",
    docs: {
      description: "Запрещает переменные с коротким именем",
      category: "Best Practices",
      recommended: false
    },
    fixable: null, // или "code" если есть автофикс
    schema: [] // опции правила
  },
  create: function(context) {
    // Список разрешённых коротких имён
    const exceptions = ["i", "j", "k", "id", "fs", "db"];
    
    return {
      VariableDeclarator: function(node) {
        const name = node.id.name;
        
        if (name.length < 3 && !exceptions.includes(name)) {
          context.report({
            node: node.id,
            message: "Имя переменной '{{name}}' слишком короткое. Используйте минимум 3 символа.",
            data: {
              name: name
            }
          });
        }
      }
    };
  }
};

module.exports = {
  rules: {
    "no-short-vars": require("./no-short-vars")
  }
};

{
  "plugins": ["my-rules"],
  "rules": {
    "my-rules/no-short-vars": "error"
  }
}

context.report({
  node: node,
  message: "Используйте строгое равенство (===) вместо (==)",
  fix: function(fixer) {
    return fixer.replaceText(node.operator, "===");
  }
});

// always-braces.js
module.exports = {
  create: function(context) {
    return {
      IfStatement(node) {
        if (node.consequent && node.consequent.type !== "BlockStatement") {
          context.report({
            node: node.consequent,
            message: "Блоки if должны использовать фигурные скобки",
            fix: function(fixer) {
              const sourceCode = context.getSourceCode();
              const consequentText = sourceCode.getText(node.consequent);
              return fixer.replaceText(node.consequent, [INLINE]{ ${consequentText} }[/INLINE]);
            }
          });
        }
      }
    };
  }
};

// Объявление переменной: let x = 5;
{
  type: "VariableDeclaration",
  declarations: [
    {
      type: "VariableDeclarator",
      id: {
        type: "Identifier",
        name: "x"
      },
      init: {
        type: "Literal",
        value: 5
      }
    }
  ],
  kind: "let"
}
 
// Вызов функции: console.log("Hello");
{
  type: "ExpressionStatement",
  expression: {
    type: "CallExpression",
    callee: {
      type: "MemberExpression",
      object: {
        type: "Identifier",
        name: "console"
      },
      property: {
        type: "Identifier",
        name: "log"
      }
    },
    arguments: [
      {
        type: "Literal",
        value: "Hello"
      }
    ]
  }
}

on
{
  "name": "eslint-plugin-my-rules",
  "version": "1.0.0",
  "description": "Custom ESLint rules for my team",
  "main": "index.js",
  "keywords": ["eslint", "eslint-plugin", "javascript"],
  "peerDependencies": {
    "eslint": ">=6.0.0"
  }
}

// .eslintrc.js
module.exports = {
  extends: ['airbnb'],
  rules: {
    // Переопределение правил при необходимости
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }]
  }
};

// .eslintrc.js
module.exports = {
  extends: ['standard']
};

// .eslintrc.js
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: ['@typescript-eslint']
};

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  plugins: ['react'],
  settings: {
    react: {
      version: 'detect' // Автоматическое определение версии React
    }
  }
};

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended'
  ],
  parser: 'vue-eslint-parser'
};

// React + TypeScript + Airbnb
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended'
  ],
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  settings: {
    react: {
      version: 'detect'
    }
  },
  rules: {
    // Разрешаем .tsx расширения для React-компонентов
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
    // Отключаем правило импорта расширений для TypeScript
    'import/extensions': ['error', 'ignorePackages', {
      js: 'never',
      jsx: 'never',
      ts: 'never',
      tsx: 'never'
    }]
  }
};

// eslint-config-mycompany/index.js
module.exports = {
  extends: ['airbnb', 'plugin:react/recommended'],
  rules: {
    // Наши корпоративные стандарты
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
    'react/prop-types': 'off',
    'import/prefer-default-export': 'off'
  }
};

// В любом проекте
module.exports = {
  extends: ['mycompany']
};

// Пример постепенной адаптации
module.exports = {
  extends: ['airbnb'],
  rules: {
    // На начальном этапе включаем как предупреждения
    'no-console': 'warn',
    'react/jsx-filename-extension': 'warn',
    
    // Со временем можно ужесточить до errors
    // 'no-console': 'error',
  }
};

on
// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"]
}

// До форматирования
function uglyCode  (a,b) {
if(a&&b){
return a+b;
}
else{ return a-b}
}
 
// После форматирования
function uglyCode(a, b) {
  if (a && b) {
    return a + b;
  } else {
    return a - b;
  }
}

// Исходный код
function example( a,b )
{ return a &&
  b ? "yes": "no"; }
 
// ESLint с правилом исправления отступов
function example( a,b )
{ 
  return a &&
    b ? "yes": "no"; 
}
 
// Prettier (полностью переписывает)
function example(a, b) {
  return a && b ? "yes" : "no";
}

// Типичная конфигурация ESLint - десятки правил
{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "no-unused-vars": "error",
    "react/jsx-no-bind": ["error", { "allowArrowFunctions": true }],
    // ... и так далее (часто сотни строк)
  }
}
 
// Типичная конфигурация Prettier - минимум опций
{
  "singleQuote": true,
  "printWidth": 80,
  "trailingComma": "es5"
}

// Правило ESLint может требовать точку с запятой
const name = "John"  // ESLint: Missing semicolon
 
// Prettier может быть настроен на отказ от точек с запятой
const name = "John"  // Prettier отформатирует именно так

// ESLint правило: quotes: ["error", "single"]
const message = "Hello"; // ESLint потребует одинарные кавычки
 
// Prettier config: { "singleQuote": false }
const message = "Hello"; // Prettier переформатирует в двойные кавычки
 
// Результат: бесконечный конфликт

// .eslintrc.js
module.exports = {
 extends: [
   'airbnb', // или любой другой пресет
   'prettier' // должен быть последним!
 ],
 // другие настройки
};

// .eslintrc.js
module.exports = {
 plugins: ['prettier'],
 rules: {
   'prettier/prettier': 'error'
 },
 // другие настройки
};

// package.json
{
 "scripts": {
   "format": "prettier-eslint --write 'src/**/*.{js,jsx,ts,tsx}'"
 }
}

// .eslintrc.js
module.exports = {
 extends: [
   'some-other-config',
   'prettier' // отключает конфликтующие правила
 ],
 plugins: ['prettier'],
 rules: {
   'prettier/prettier': 'error' // запускает prettier как правило eslint
 }
};

// .eslintrc.js
module.exports = {
 extends: [
   'some-other-config',
   'plugin:prettier/recommended' // включает и плагин, и конфигурацию
 ]
};

// .prettierrc
{
 "semi": false,
 "singleQuote": true
}
 
// .eslintrc.js
module.exports = {
 // ...
 rules: {
   // Отключаем правило semi в ESLint, т.к. Prettier настроен убирать точки с запятой
   'semi': 'off',
   
   // Настраиваем prettier как правило ESLint с теми же опциями
   'prettier/prettier': ['error', {
     'semi': false,
     'singleQuote': true
   }]
 }
};

// ESLint хочет ограничивать длину строки
// .eslintrc.js
module.exports = {
 rules: {
   'max-len': ['error', { 'code': 80 }]
 }
};
 
// Prettier также имеет настройку длины строки
// .prettierrc
{
 "printWidth": 100
}

// .eslintrc.js
module.exports = {
 rules: {
   // Снижаем до предупреждения, чтобы не блокировать коммиты
   'max-len': ['warn', { 'code': 100 }]
 }
};
 
// .prettierrc
{
 "printWidth": 100
}

// Gulp
const gulp = require('gulp');
const jshint = require('gulp-jshint');
 
gulp.task('lint', function() {
  return gulp.src('./src/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});
 
// Grunt
module.exports = function(grunt) {
  grunt.initConfig({
    jshint: {
      all: ['src/**/*.js']
    }
  });
  
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('default', ['jshint']);
};

// Пример кода с типичными предупреждениями JSHint
function calculateTotal(items) {
  var total = 0;  // JSHint: Используйте let/const в ES6
  
  for (var i = 0; i < items.length; i++) {
    var item = items[i];  // JSHint: Переменная, затеняющая внешнюю
    
    if (item.price == null) continue;  // JSHint: Отсутствуют фигурные скобки
    
    total += item.price * (item.quantity || 1);
  }
  
  return total;
}

// .eslintrc.js
module.exports = {
 rules: {
   // Все правила только предупреждают
   'semi': 'warn',
   'indent': 'warn',
   'no-unused-vars': 'warn'
 }
};

// Неделя 1: критические правила
{
 "rules": {
   "no-undef": "error",
   "no-global-assign": "error"
 }
}
 
// Неделя 2: добавляем проверку неиспользуемых переменных
// И так далее

// .eslintrc.js
module.exports = {
 extends: [
   'airbnb',
   'plugin:prettier/recommended'
 ]
};

on
// package.json
{
 "husky": {
   "hooks": {
     "pre-commit": "lint-staged"
   }
 },
 "lint-staged": {
   "*.{js,jsx,ts,tsx}": [
     "eslint --fix",
     "prettier --write"
   ]
 }
}