README

I have set up a project to show what our possible coding standards and project settings could be going forward.

This is all up for discussion and will need a bit of a play around with actually adding it to a rails project.

Things to discuss

Prettier
ESLint
Stylelint
Automate Format and Lint on Save
Husky
Lint-staged
Editor Config

Prettier

I have setup a script to run prettier on command in the package.json

“prettier”: “prettier — write app/javascript/**/*.js”

In theory, this will run through all the js files in the rails 5 javascript folder and save them as it formats them.

ESLint

My thoughts for ESLint would be to go with Airbnb Javascript Style guide as this is still actively maintained.

There is a eslintrc which turns some of the airbnb stuff off and other which are incompatible with prettier.

I have added lint scripts to the package.json, but this may need a little work to run with a rails project due to view locations etc. The lint:write script will try and fix issues automatically.

Stylelint

Stylelint has been added to lint or css and scss going forward. Currently we are extending the stylelint-config-standard

To extend it and add rules you can do it like this:

#!javascript

{
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": ["extends", "ignores"]
      }
    ],
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-allowed-list": ["em", "rem", "s"]
  }
}

Automate Format and Lint on Save

Install a plugin called ESLint extension.

Download here or press ctrl+shift+x in your VS Code editor. This will open up the extensions module. There, search type eslint. A list of plugins will appear. Install the one by Dirk Baeumer. Once that is installed hit the reload button to restart your editor. Once you have this plugin installed, in your root app/ folder create a folder called .vscode/ — the (dot) is important in the filename.

Inside the folder create a settings.json file like below:

{
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
}

descriptions for above:

editor.formatOnSave

I have set the value to false here because I don’t want the default editor configuration for file format to conflict with ESLint and Prettier.

eslint.autoFixOnSave

I have set the value to true here because I want the installed plugin to work every time I hit save. Since ESLint is configured with Prettier configurations, every time you hit save it will format and lint your code.

Husky

I have included Husky to perform certain actions when you are about to commit or when you are about to push code to a branch. For example, the work Joe has been looking at for image optimisation. (below will need to be added to package.json)

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},

Lint-staged

I have added this in after seeing it used elsewhere. With the addition of lint:write in the package.json, linting can be done and then add the files to the staging area and commit.

We can add more into this going forward, I have just added one in so far which runs the lint:write command on all js and jsx files then does git add.

The included configuration will do the following:

trim trailing white spaces from .md & .js files
set indent style to space instead of tab
indent size to 2
end of line to be lf so that everyone, irrespective of their OS, has the same end of line. Read more here.
there should be a new line at end of file
and the max line length should be 100 chars

Editor Config

This is just a basic config so that whatever editor people use they get the same defaults such as tab space or line ending etc.

Wiki

Front End Standards / Home