Koodin staattinen analyysi ESLintillä

Tekijä: Markus Haverinen L4837

Kuvaus

ESLint on JavaScript validaattori, joka osaa tunnistaa ja korjata virheitä JavaScript koodista.

Projektin source-frontend repositorion CI/CD-pipelineen on integroitu ESLint, joka tarkastaa koodin joka kerta kun repoon pusketaan uutta koodia. Virheet katsotaan manuaalisesti CI/CD lokista, jos validointi ei mene läpi.

.eslintrc-tiedosto

ESLintin toimintaa voidaan hallita .eslintrc-tiedoston avulla. Tideoston avulla määritetään eri asetuksia sekä sen miten ESLint tarkastaa koodin esim. mitä parseria, plugineja ja/tai conffeja ESLint käyttää. Omia sääntöja/poikkeuksia on myös mahdollista asettaa "rules" blockin sisään.

Tidoston formaatti voi olla joko .js, .json tai .yaml muotoa. Alla oleva esimerkki on .js muotoa.

.eslintrc.js -tiedosto

module.exports = {
    env: {
        browser: true,
        es6: true
    },
    parser: 'babel-eslint',
    extends: [ 'eslint:recommended', 'plugin:react/recommended' ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        },
        ecmaVersion: 2018,
        sourceType: 'module'
    },
    plugins: [ 'react', 'only-warn' ],
    rules: {
        'react/prop-types': 'warn',
        'no-unused-vars': 'warn'
    }
};

ESLint ja Gitlab CI/CD

ESLint voidaan integroida esim. Gitlabin CI/CD-pipelineen, jolloin sitä voidaan ajaa automaattisesti joka kerta kun uutta koodia pusketaan repoon. Alla esimerkkiratkaisu.

.gitlab-ci.yml tiedoston lint-stage

lint:
  image: pipelinecomponents/eslint:latest
  stage: lint
  script:
    - cd app
    - npm install
    - eslint .
  allow_failure: true
  tags:
    - docker