How did you use a linter for JavaScript?

Used together with ESLint and Prettier for automatic code formatting and checking for style errors, potential bugs, and pattern violations. The configuration usually included preset rules, such as airbnb-base or @typescript-eslint. Integrated with IDE (VS Code) for instant feedback during coding and with build systems (Webpack, Vite) using appropriate plugins (eslint-webpack-plugin) to perform checks before building or during commits (via lint-staged and husky).

// Example of .eslintrc.js file
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
    'plugin:@typescript-eslint/recommended',
    'prettier', // Disables ESLint rules conflicting with Prettier
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    '@typescript-eslint',
    'prettier',
  ],
  rules: {
    // Override or add custom rules
    'no-console': 'warn', // Warning instead of error for console.log
    'import/no-unresolved': 'off', // Example of disabling a rule (may be needed for path aliases)
    'prettier/prettier': 'error', // Treat Prettier rules as ESLint errors
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'], // Consider extensions for imports
      },
    },
  },
};

In package.json, scripts are usually configured for convenient running:

{
  "scripts": {
    "lint": "eslint './src/**/*.{js,jsx,ts,tsx}'",
    "lint:fix": "eslint './src/**/*.{js,jsx,ts,tsx}' --fix",
    "format": "prettier --check './src/**/*.{js,jsx,ts,tsx,css,scss,md,json}'",
    "format:fix": "prettier --write './src/**/*.{js,jsx,ts,tsx,css,scss,md,json}'"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-prettier": "^4.0.0",
    "@typescript-eslint/eslint-plugin": "^4.32.0",
    "@typescript-eslint/parser": "^4.32.0",
    "prettier": "^2.4.1",
    "husky": "^7.0.0",
    "lint-staged": "^11.1.2"
  },
  "lint-staged": {
    "./src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ],
    "./src/**/*.{js,jsx,ts,tsx,css,scss,md,json}": [
      "prettier --write"
    ]
  }
}