How to set up GitHub Workflows to work with ESLint, Prettier, Stylelint and Travis.

The best workflow is a consistent workflow. Let's walkthough how we can enfore ESLint, Prettier and Stylelint using GitHub Workflows in addition to our local environment.

In all honesty, GitHub has a lot of perks i'm likely not benifiting from. Let's create a new React App with the Airbnb Style Guide and demonstrate how we can set this up.

Prerequisites

Before we begin you will need to have a relatively recent version of node installed. We can check by running node -v. We should get see a response similar to the one below.

We will also need ESLint. We can install this locallay or globally here. To verify we have eslint we can run eslint -v.

Step 1

Create a new directory & a initialize a new GitHub Repo

We'll be using the terminal for the initialization process so lets begin by making a new directory and initialize Git.

$ mkdir workflow-demo
$ cd $_
$ git init

Step 2

Initialize a new React App

A convient way to get up and running in React quick is by using the create-react-app command.

$ npx create-react-app .

Step 3

Commit, Push and Switch to a New Branch.

Let's add and commit what we have, then we can push our work to GitHub. From there we will switch to a new branch because our workflow won't work if we are pushing directly to the master. Read these commands carefully as they will be different than mine.

$ git add .
$ git commit -m 'hello world'
$ git remote add origin https://github.com/hi-matbub/workflow-demo.git
$ git branch -M master
$ git push -u origin master
$ git checkout -b dev

Step 4

Init ESLint and Prettier

We've already installed ESLint with our React App, (Go ahead and see for yourself!) So let's go ahead an initialize ESLint by running the following command.

$ eslint --init

If you aren't familiar with Prettier, It's is an awesome tool that auto formats our code in an attempt to keep consistency amongst file types. Let's add Prettier to our dependencies real quick;

$ npm i prettier

Now we can create a .prettierrc file in our base directory and configure our rules accordingly. Here's a few I work with;

{
  \"tabWidth\": 4,
  \"semi\": false,
  \"singleQuote\": true,
  \"jsxSingleQuote\": true,
  \"bracketSpacing\": true,
  \"jsxBracketSameLine\": false
}

Let's run both of these one time,

$ npx prettier --config .prettierrc --write .
$ npx eslint .

Well well, it looks like we've got a few errors. We can handle these the old fashion way or ignore them.. let's just ignore them for now. Create a .eslintignore file in the base directory and add the two files we see in the error.

src / serviceWorker.js;
src / App.test.js;

run the eslint command again and we should be good to go!

Step 5

Add a Workflow to your Base Directory

From your base directory, create a nested file under the path /.github/workflows/lint.yml and insert the following contents: