W tym tygodniu zobaczysz jak odpalić esLinta i styleLinta pod jest'em. Zobaczysz jak styleLint potrafi ogarniać css-in-js. Przeczytasz jak udała mi się przesiadka z WebStorma na VSCode. Na koniec polecam prezentację na temat microfrontends. Zapraszam!

jest-runners

W #6 odcinku learning log'a opowiadałem Wam o tym, że jest może odpalić "prawie" wszystko ;) W tym tygodniu postanowiłem to sprawdzić na przykładzie eslint'a i stylelint'a. Zobaczcie jak to zrobiłem i co mi to dało.

Po pierwsze, zamiast jednego pliku jest.config.js utwórzmy sobie trzy pliki konfiguracyjne pod każdego runner'a:

  • jest.unitTest.config.js
  • jest.esLint.config.js
  • jest.styleLint.config.js

Do uruchomienia linterów pod jestem potrzebne nam są dwa pakiety:

$ npm install --saveDev jest-runner-eslint jest-runner-stylelint

Następnie zmodyfikujmy utworzne przed chwilą pliki.

unitTest

const { defaults } = require("jest-config");

module.exports = {
    displayName: "unitTests",
    moduleNameMapper: {
        ".scss$": require.resolve("./test/mocks/style"),
        "^components(.*)$": "<rootDir>/src/main/javascript/components/$1",
    },
    setupTestFrameworkScriptFile: require.resolve("./test/jest-setup.js"),
    snapshotSerializers: ["enzyme-to-json/serializer"],
};

esLint

module.exports = {
    runner: "jest-runner-eslint",
    displayName: "esLint",
    testMatch: ["<rootDir>/src/**/*.js?(x)"],
};

styleLint

module.exports = {
    displayName: "styleLint",
    runner: "jest-runner-stylelint",
    moduleFileExtensions: ["css", "scss", "jsx", "js"],
    testMatch: [
        "<rootDir>/src/**/*.?(s)css",
        "<rootDir>/src/**/*.!(spec.)js?(x)",
    ],
};

styleLint dla css-in-js

Jak pewnie słusznie zauważyliście, przy konfiguracji styleLinta podałem rozszerzenia typu js i jsx. Związane jest to z tym, iż w projekcie zaczęliśmy używać podejścia css-in-js z wykorzystaniem emotion.

Podstawowa konfiguracja styleLint'a nie obejmuje parsowania plików js pod kątem string-templates z definicjami css. Do tego potrzebny jest dodatkowy procesor i konfiguracja.

Krok pierwszy npm install

$ npm install --saveDev stylelint-config-styled-components stylelint-processor-styled-components

Krok drugi, edycja konfiguracji styleLint'a:

//.stylelintrc
{
  "extends": ["stylelint-config-standard", "stylelint-config-styled-components"],
  "processors": ["stylelint-processor-styled-components"],
  "rules": {
     // Tutaj wstawiamy reguły
  }
}

I to wszystko! Od teraz nasze css'y pisane w js'ie będą podlegały sprawdzeniu przez reguły styleLintera. +1 do jakości kodu ;)

Wracamy do naszego jest-runnera.

Ostatnim krokiem jest przekazanie do jest'a naszych konfiguracji. Robimy to poprzez pole projects. Możemy to ustawić w pliku jest.config.js ablo po prostu w package.json:

"jest": {
  "projects": [
    "<rootDir>/jest.unitTest.config.js",
    "<rootDir>/jest.esLint.config.js",
    "<rootDir>/jest.styleLint.config.js"
  ]
}

Wystarczy teraz tylko odpalić npx jest i obserwować efekty naszej pracy :)

Screen-Shot-2018-07-08-at-17.11.06

Screen-Shot-2018-07-08-at-17.11.18

Screen-Shot-2018-07-08-at-17.11.32

Jedną komendą odpalamy unit testy i nasze lintery do js'a i css'a.

No dobra...ale po co mi to? Przecież równie dobrze mogę skorzystać ze zwykłego runnera esLint czy styleLint odpalając równolegle skrypy. Zgoda! Masz rację. Ale cały bonus tkwi w opcji --watch.

Jeśli pamiętasz to --watch odpala testy tylko dla zmienionych plików na podstawie git-stage. Czy podstawowy runner esLint tak potrafi? ;) ...no właśnie nie :) I tu cały bonus.

Nasza konfiguracja odpala testy + lintery tylko dla zmienionych plików + plików, które zależą od zmian:

ezgif-3-f2ac4a84f6

Przesiadka z WebStorm'a na VScode

Miesiąc temu postanowiłem dać szansę IDE ze stajni MicroSoftu. Oczywiście nie mogło obyć się bez problemów :) Zobaczcie jak sobie z nimi poradziłem czytając dedykowany wpis Przesiadka z WebStorm'a na VScode.

Microfrontends

Słyszał(eś/aś) o temacie microfrontends? Nie? To niżej znadziejsz bardzo fajną prezentację na ten temat ;) Sam planuję przetestować takie podejście do tworzenia aplikacji...i jak tylko wyciągnę jakieś wnioski to podzielę się nimi na prezentacji meetJs.


Zapraszam do dzielenia się swoimi spostrzeżeniami, pytaniami i uwagami w komentarzach ;) Konstruktywna krytyka jak zawsze - mile widziana :)