eslint

Eslint + Prettier configuration options to be shared across internal projects

Usage

Using with a JavaScript project

npm i -D eslint @lambdaschool/eslint-config
echo "module.exports = { extends: '@lambdaschool' };" > .eslintrc.js
echo "module.exports = require('@lambdaschool/eslint-config/.prettierrc.js');" > .prettierrc.js

Using with React

npm i -D eslint @lambdaschool/eslint-config
echo "module.exports = { extends: '@lambdaschool/eslint-config/react' };" > .eslintrc.js
echo "module.exports = require('@lambdaschool/eslint-config/.prettierrc.js');" > .prettierrc.js

Using with Typescript

npm i -D eslint @lambdaschool/eslint-config
echo "module.exports = { extends: '@lambdaschool/eslint-config/typescript', parserOptions: { project: './tsconfig.json' } };" > .eslintrc.js
echo "module.exports = require('@lambdaschool/eslint-config/.prettierrc.js');" > .prettierrc.js

IDE Integration

Visual Studio Code

You will need to have your settings.json file open to make several settings adjustments. To find your settings.json file do the following:

1. Click on the gear icon in the lower left of the VS Code window
2. Select "Settings"
3. Ensure that you on the "User" tab so that the settings will be applied globally (not Workspace)
4. Search for "unformatted"
5. In the search results click on a link to "Edit in settings.json"
6. Now you should have your settings.json file open.

Install and configure the Prettier extension

1. Install the "Prettier - Code formatter" extension by Esben Petersen (note that there are currently four (4) Prettier extensions. You want the one by Esben Petersen. This extension uses your local .prettierrc.js file and uses your locally installed prettier package in your node_modules folder. The fact that it reads the local files is what makes this package work better than the default prettier implementation that ships with VSCode.
2. Make this extension the default formatter by adding the following to your settings.json file:

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

Install and configure the Eslint extension

1. Install the "ESLint" extension by Dirk Baeumer.
2. Make this extension work by adding the following to your settings.json file:

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

Format on save

Setting up VSCode to format on save is a huge time saver. These settings make it so that every time your cursor leaves the file, the file is saved. Furthermore, every time the file is saved, it gets formatted using our eslint and prettier configuration! :tada: Just add the following to your settings.json file:

    "files.autoSave": "onFocusChange",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnSave": true,

Development

npm i
npm test

There are test files that various linting rules can be tried out on. When adding rules, add to these files or create new ones to verify that the linting behavior is as desired.

Publishing

When ready to publish, follow these steps:

1. Verify that all PRs have been merged into the staging branch.
2. Open up a PR to merge the staging branch into the master branch. Typically the PR is named after the version that will be published, for example v2.1.0.
3. After reviewing the changes that will be merged into master, determine the appropriate version change, major, minor, or patch.
4. While on the staging branch locally, update the CHANGELOG.md file with an entry for the new version you're about to publish and commit your changes.
5. While still on the staging branch locally, version the project using npm version <semver> where <semver> is major, minor, or patch. For example: npm version patch.
6. git push your local staging branch up to origin.
7. When the PR has been reviewed and merged into master, the package will be published by CI after the tests pass.