Nacelle Code Formatting with ESLint

What it does

• Lints JavaScript based on modern standards
• Fixes formatting issues

This helps us keep all Nacelle Projects formatted consistently.

Installing

While it's possible to use these tools globally, it's best to install on a per-project basis, as follows:

1. For new projects that don't already have a package.json file, create one with npm init.

2. Install everything needed by the config:

npx install-peerdeps --dev @nacelle/eslint-config-nacelle

3. There should now be a big list of devDependencies in package.json

4. Specify that your project uses this ESLint configuration by doing one of the following:

• Add the following section to package.json:

"eslintConfig": {
  "extends": [
    "@nacelle/nacelle"
  ],
}

TIP: By adding this snippet into your VSCode snippets file, you can add this to your package.json by just starting to type fmtncl and pressing TAB, as follows:

• Alternatively, you could create a .eslintrc file in the project's root directory, containing:

{
  "extends": ["@nacelle/nacelle"]
}

With VS Code

It's a good idea to have VSCode lint and fix for you, instead of having to run eslint . or eslint . --fix. Here's how to set that up:

1. Install the ESLint package
2. Now we need to setup some VS Code settings via Code/File → Preferences → Settings. It's easier to enter these settings while editing the settings.json file, so click the {} icon in the top right corner:

"editor.formatOnSave": true,
// turn it off for JS, we will do this via eslint
"[javascript]": {
  "editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"eslint.autoFixOnSave": true,
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": ["javascript"],

Credits

This workflow borrows heavily from the No-Sweat™ Eslint and Prettier Setup created by Wes Bos.