workshop-setup

Grupa nr 4: Jak się przygotować do warsztatów?

1. Zapoznać się z domyślnym config-iem i wykonać polecenia stamtąd
2. Skonfigurować Jest w projekcie
3. Skonfigurować formatowanie kodu w edytorze
4. Skonfigurować ESLint
5. Wypchnąć zsetupowany projekt na GitHub

Uwaga nr 1: Podczas setup-owania własnego projektu można “posiłkować się” projektem trenera.

Uwaga nr 2: kroki 3 oraz 4 są opcjonalne, aczkolwiek bardzo polecane

Konfiguracja Jest

Instalujemy jest oraz biblioteki powiązane

cd TWOJ_PROJEKT
npm install jest babel-jest babel-preset-env regenerator-runtime

Tworzymy plik .babelrc, w którym piszemy

{
  "presets": ["env"]
}

Tworzymy katalog src a w nim dwa pliki - index.js a także index.test.js. index.js zostawiamy na razie pusty, a w index.test.js piszemy

import './index';

test('Jest should work', () => {
});

W pliku package.json modyfikujemy/dodajemy w sekcji scripts polecenia test oraz test:watch:

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watchAll"
  }
}

Testujemy setup:

Jeśli wszystko działa poprawnie, to po wykonaniu w terminalu następującego polecenia

npm test

powinniście zobaczyć następujące napisy

 PASS  src/index.test.js (5.149s)
  √ Jest should work (15ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        8.294s
Ran all test suites.

Konfiguracja formatowania kodu w edytorze

Tworzymy plik .editorconfig w którym wpisujemy

root = true

[*]
end_of_line = lf
insert_final_newline = false

[*.{babelrc,js,jsx,html,css,sass}]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

Konfiguracja ESLint

Instalujemy pakiet eslint

npm install eslint

tworzymy plik konfiguracyjny .eslintrc.json w którym wpisujemy

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true,
        "jest": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

Wypychanie zsetupowanego projektu na GitHub

Tworzymy plik .gitignore, w którym wpisujemy

node_modules
npm-debug.log
*~

Komitujemy zmiany i puszujemy (wypychamy) na GitHub

git add .
git commit -m "Setup project"
git push origin HEAD:master