ESLint Configuration for Addition

This project defines the ESLint and Prettier configuration for Addition development. It is published as a public npm package allowing other Addition projects to install it, so that the rulesets are shared between all projects and defined in one place. Currently the configuration is intended for linting Typescript React projects. The Javascript Standard ruleset is used rather than Google or AirBnB.

How to install in your Addition project

Install ESLint and supporting packages:

npm i -D eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-standard "@typescript-eslint/eslint-plugin" "@typescript-eslint/parser" prettier eslint-config-prettier eslint-plugin-prettier

Then install the Addition ESLint config package:

npm install @additionapps/eslint-config-addition

Note the postinstall script will copy an .eslintrc.js file into the root of your current project.

Manually running the linter

In your project root:

npx eslint **/*.ts[x] --fix

Errors that can be fixed automatically will be, remaining errors will be listed.

Updating the package

If there is an update to the linting rules for Addition a new version of the package will be published. To update the package for use in a project:

npm update @additionapps/eslint-config-addition

Updating the linting rules

If you want to change the ESLint configuration update the current configuration in index.js. To update a Prettier rule, update the configuration in index.js and in .prettierrc.js.

Once the required rule changes have been made, update the package version number in package.json.

Then commit and push the changes to the Bitbucket repo (master branch).

Then: npm publish

Configuring IDEs to use your ESLint configuration

The IDEs will automatically detect the .eslintrc.js file in the project root.

PhpStorm

1. Open Preferences
2. Navigate to Languages and Frameworks | JavaScript | ESLint
3. Select Automatic ESLint configuration option

For more details see https://www.jetbrains.com/help/phpstorm/eslint.html

VSCode

1. If not already installed, Cmd + Shift + x and search for ESLint, then install it

2. Open ESLint settings and click 'Configure Extension Settings'. (Click the cog icon next to the ESLint extension.)

3. Click an 'Edit in settings.json' link and add the following to the file

   "eslint.validate": [
     "javascript",
     "javascriptreact",
     "typescript",
     "typescriptreact"
   ]

   This tells VSCode to lint Typescript files, not just JS.

4. Set the remaining settings as desired. E.g. Tick 'Auto Fix On Save'