response200/eslint-config

Kireät ESLint-säännöt JavaScript/TypeScript/JSX-projekteihin yhdessä kätevässä paketissa. Linttaus pitää koodisi siistinä ja yhtenäisenä sekä auttaa välttämään sudenkuoppia ja suoranaisia virheitä.

Scroll down to English documentation

JS-, TS- ja JSX-säännöt voi jokaisen erikseen kytkeä tai jättää kytkemättä päälle. response200/eslint-config käyttää pohjana seuraavia yleisiä säännöstöjä, joiden lisäksi paketti sisältää lisäsääntöjä ja joidenkin sääntöjen kiristyksiä.

• eslint/recommended
• eslint-config-love
• eslint-config-standard
• eslint-config-standard-jsx
• @typescript-eslint/eslint-plugin
• eslint-plugin-jsx-a11y
• eslint-plugin-import
• eslint-plugin-promise

Paketin mukana tulee lint.sh-työkalu, jonka avulla on kätevä lintata erilaisia tiedostovalikoimia. Lisää siitä alempana kohdassa lint.sh.

Asennus

Asentaaksesi aja seuraava komento:

npm install --save-dev @response200/eslint-config

Konfigurointi

Lisää .eslintrc.js-tiedostoon seuraavat konfiguraatiot:

const path = require('path')

module.exports = {
  extends: [
    '@response200/eslint-config/recommended',
    '@response200/eslint-config/recommended-jsx'
  ],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: [
        '@response200/eslint-config/recommended-typescript'
      ]
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, 'tsconfig.json')
  }
}

Jos et käytä TypeScriptiä tai halua käyttää siihen liittyviä sääntöjä, voit jättää pois seuraavat rivit.

const path = require('path')

  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: [
        '@response200/eslint-config/recommended-typescript'
      ]
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, 'tsconfig.json')
  }

Jos et käytä JSX:ää tai halua käyttää siihen liittyviä sääntöjä, voit jättää pois seuraavan rivin.

    '@response200/eslint-config/recommended-jsx'

Mainittavaa JSX-säännöistä ja Reactista

response200/eslint-config sisältää JSX-sääntöjä ja eslint-plugin-react-moduuli asennetaan automaattisesti sen mukana. React-spesifejä sääntöjä ei kuitenkaan ole kytketty päälle. response200/eslint-config pyrkii olemaan geneerinen lint-säännöstö, joka soveltuu kaikenlaisiin JSX-projekteihin ml. projektit, joissa käytetään jotain toista JSX-kirjastoa kuten esimerkiksi Crankia.

Jos kuitenkin käytät Reactia, on suositeltua lisätä eslint-plugin-react, eslint-plugin-react-hooks ja eslint-config-standard-react säännöstöt. Aja seuraava komento asentaaksesi ne:

npm install --save-dev eslint-plugin-react-hooks eslint-config-standard-react

Lisää sitten seuraavat rivit .eslintrc.js-tiedoston extends-taulukkoon:

  extends: [
    ...
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'standard-react'
  ],

lint.sh

response200/eslint-config-paketissa tulee mukana lint.sh. Se on kätevä komentorivityökalu, jonka avulla erilaisten tiedostovalikoimien linttaaminen git-versiohallinnoidussa projektissa onnistuu nopeasti ja helposti. Työkalu on apuväline eslintin ajamiseen.

Työkalulla on viisi toimintamoodia:

• paths (linttaa määrätyt tiedostot ja hakemistot)
• changed (linttaa committaamattomat muutetut tiedostot ml. staged-tilassa olevat)
• staged (linttaa staged-tilassa olevat committaamattomat muutetut tiedostot)
• rev (linttaa tiedostot, joita on muutettu määrätyn commitin jälkeen)
• branch (linttaa aktiivisena olevan haaran muutetut tiedostot)

Lint.sh kokoaa listan muutetuista .js, .jsx, .ts ja .tsx-tiedostoista git diffin avulla. paths-moodissa lista muodostuu käyttäjän määräämän mukaisesti. Lista ja muut lint.sh:lle mahdollisesti annetut komentoriviargumentit passataan eslintille.

Esimerkki 1: linttaa määrätyt tiedostot ja hakemistot

npx lint.sh paths foo.js bar.tsx directory/subdirectory

Esimerkki 2: linttaa määrätyt tiedostot ja ohjeista eslint tekemään automaattiset korjaukset

npx lint.sh paths foo.js bar.tsx --fix

Esimerkki 3: linttaa committaamattomat muutetut tiedostot

npx lint.sh changed

Esimerkki 4: linttaa staged-tilassa olevat committaamattomat muutetut tiedostot

npx lint.sh staged

Vinkki: skriptaa gitin pre-commit-koukku ajamaan node_modules/.bin/lint.sh staged --fix. Automatisoitu linttaus ja automaattinen virheiden korjaus commitin yhteydessä!

Esimerkki 5: linttaa viimeisimmässä commitissa muutetut tiedostot

npx lint.sh rev HEAD~1..HEAD

Vinkki: rev-moodi hyväksyy minkä tahansa git-revision argumentikseen. Katso man 7 gitrevisions, mihin kaikkeen git-revisioita voikaan käyttää.

Esimerkki 6: linttaa aktiivisena olevan haaran muutetut tiedostot

npx lint.sh branch

Vinkki: laita CI-ympäristösi suorittamaan node_modules/.bin/lint.sh branch pull requestin yhteydessä ja estä haaran/pull requestin liittäminen masteriin, jos lint.sh palauttaa linttausvirheitä (paluukoodi muu kuin 0). Automatisoitu koodin laadun- ja koodauskäytäntöjen valvonta.

Lisävinkki: moodeista voi käyttää myös lyhenteitä p, c, s, r ja b.

Yleisiä ongelmia

Pisteellä alkavien tiedostojen linttaaminen epäonnistuu TypeScript-projektissa

Kun TypeScript-projektissa yrittää lintata ESLintin .eslintrc.js-tiedostoa tai jotakin muuta pisteellä alkavaa tiedostoa, saattaa linttaus epäonnistua ja seuraava virhe tulee tulostetuksi:

/path/to/.eslintrc.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided

Ongelma johtuu siitä, ettei tsc oletuksena käsittele pisteellä alkavia tiedostoja. Ongelman voi korjata lisäämällä tsconfig.json-tiedostoon seuraavat rivit:

{
  // This include array enables linting of dotfiles.
  "include": ["**/*", "**/.*"]
}

Lisenssi

BSD 3-Clause. Toteuttanut Joel Posti.

Tue response200/eslint-configin kehitystä

response200/eslint-config on ilmainen avoimen lähdekoodin projekti. Toivon, että se olisi hyödyksi. Jos haluat tukea sen kehitystä tai olet muuten vain avokätisellä tuulella, voit lahjoittaa sopivaksi katsomasi summan PayPalilla.

response200/eslint-config (English)

Strict ESLint rules for JavaScript/TypeScript/JSX projects in one convenient package. Linting keeps your code clean, maintains consistency, and helps in avoiding common pitfalls and outright programming errors.

JS, TS and JSX rulesets can be individually enabled or left disabled. response200/eslint-config is mostly based on the following common rulesets, but it also enables and tightens some additional rules.

• eslint/recommended
• eslint-config-love
• eslint-config-standard
• eslint-config-standard-jsx
• @typescript-eslint/eslint-plugin
• eslint-plugin-jsx-a11y
• eslint-plugin-import
• eslint-plugin-promise

Included in response200/eslint-config is lint.sh tool. With it it's easy to lint different file selections. Read more about it below lint.sh.

Installation

To install run the following command:

npm install --save-dev @response200/eslint-config

Configuration

Add the following configuration to .eslintrc.js file:

const path = require('path')

module.exports = {
  extends: [
    '@response200/eslint-config/recommended',
    '@response200/eslint-config/recommended-jsx'
  ],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: [
        '@response200/eslint-config/recommended-typescript'
      ]
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, 'tsconfig.json')
  }
}

If you do not use TypeScript or do not wish to use TypeScript rules, you can leave out the following lines.

const path = require('path')

  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      extends: [
        '@response200/eslint-config/recommended-typescript'
      ]
    }
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: path.join(__dirname, 'tsconfig.json')
  },

If you do not use JSX or do not wish to use JSX rules, you can leave out the following line.

    '@response200/eslint-config/recommended-jsx'

Notes on JSX rules and React

response200/eslint-config includes JSX rules, and eslint-plugin-react is automatically installed with it. However, no React specific rules are enabled. response200/eslint-config aims to be a generic, framework agnostic ruleset that fits in all kinds of JSX projects including those that use other JSX frameworks, eg. Crank.

If you do use React, it's recommended to include eslint-plugin-react, eslint-plugin-react-hooks and eslint-config-standard-react rulesets. Run the following command to install them:

npm install --save-dev eslint-plugin-react-hooks eslint-config-standard-react

Then add the following lines to the extends array in .eslintrc.js:

  extends: [
    ...
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'standard-react'
  ],

lint.sh

response200/eslint-config includes lint.sh tool. It's a useful command-line tool for linting various file selections quickly and easily in a git project. The tool is a helper for running eslint.

The tool has 5 operational modes:

• paths (lint specified files and/or directories)
• changed (lint uncommitted changed files incl. staged files)
• staged (lint staged files)
• rev (lint files that have been changed after a specified revision)
• branch (lint files that have been changed in the current branch)

Lint.sh gathers a list of changed .js, .jsx, .ts and .tsx files by calling git diff. In paths mode the file list is user specified. The file list and possible command-line arguments are passed to eslint.

Example 1: lint specified files and directories

npx lint.sh paths foo.js bar.tsx directory/subdirectory

Example 2: lint specified files and instruct eslint to apply automatic fixes

npx lint.sh paths foo.js bar.tsx --fix

Example 3: lint uncommitted changed files

npx lint.sh changed

Example 4: lint staged files

npx lint.sh staged

Tip: create a git pre-commit hook that runs node_modules/.bin/lint.sh staged --fix. Automatic linting and fixing on each git commit!

Example 5: lint files changed in the latest commit

npx lint.sh rev HEAD~1..HEAD

Tip: rev mode accepts any git revision. See man 7 gitrevisions to see what git revisions can be used for.

Example 6: lint files that have been changed in the current branch

npx lint.sh branch

Tip: configure your CI environment to run node_modules/.bin/lint.sh branch for each pull request. If the files changed in the branch do not pass linting, lint.sh exits with a non-zero exit code which can be used to prevent merging of the branch to master. Automatic code quality monitoring and enforcement of coding conventions.

PRO TIP: modes have abbreviated aliases p, c, s, r and b.

Common issues

Linting dotfiles fails in a TypeScript project

Linting dotfiles, such as ESLint's .eslintrc.js, might fail in a TypeScript project with the following error message:

/path/to/.eslintrc.js
  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided

This error happens because by default tsc does not read dotfiles. The issue can be fixed by adding the following lines to the tsconfig.json file:

{
  // This include array enables linting of dotfiles.
  "include": ["**/*", "**/.*"]
}

Licence

BSD 3-Clause. Authored by Joel Posti.

Support the development of response200/eslint-config

response200/eslint-config is an open source project distributed free of charge. I hope you find it useful. If you wish to support its development or if you are feeling generous, you can donate an amount of your choosing with PayPal.