VS Code, ESLint, Prettier project setup

VS Code, ESLint, Prettier project setup

Install VS Code Extensions

In VS Code, install the ESLint and Prettier extensions.

Set Prettier global settings. Open the command pallet.

Search for 'format on save' and enable it.

Search for 'prettier'. Enable Single Quote.

npm Install Packages

Create package.json file.

npm init -y

Install developer dependencies.

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

Install the Airbnb ESLint configurations.

For Node without React. More details at eslint-config-airbnb-base.

npx install-peerdeps --dev eslint-config-airbnb-base

For Node and React. More details at eslint-config-airbnb.

npx install-peerdeps --dev eslint-config-airbnb

Configure Prettier

Create file .prettierrc. Go to Configure Prettier Options for rule definitions.

{
  "singleQuote": true
}

In the package.json file add the following lines.

Configure ESLint

Install ESLint globally if not already installed.

sudo npm i -g eslint

Generate the ESLint configuration file.

eslint --init

A series of selections are used to determine how ESLint is used.

Edit the .eslintrc.json file to something like the following.

{
  "env": {
    "es2021": true
  },
  "extends": [
    "airbnb-base",
    "prettier",
    "plugin:node/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "no-unused-vars": "error",
    "no-console": "off",
  }
}

Additional ESLint resources

See A list of awesome ESLint configs, plugins, etc..

For TypeScript

Install ESLint TypeScript

Install TypeScript.

npm i D typescript

Create a TypeScript configuration file.

tsc --init

In the tsconfig.json file uncomment and change the outDir and rootDir properties.

"outDir": "./lib",
"rootDir": "./src",

Reload VSCode Window

From VSCode, F1, cmd+shift+p (Mac), ctrl+shift+p (Linux).

Type "reload window", select to execute.

ghacosta/vscode-eslint-prettier-project-setup.md