Skip to content

How to setup your IDE for correct linting

Jump to bottom
Drew Baker edited this page Apr 20, 2021 · 4 revisions

Overview on linting

This project has linting setup for Vue/GQL/JS/SCSS/CSS and HTML using Prettier and ESLint. The ruleset is the Vue style guide "Recommended" spec.

Behind the scenes, the workflow is this: Ugly code > Prettier > ESLint > Nice code!

The idea is that Prettier formats things like CSS and GQL nicely, and ESLint goes last and does everything else. This allows us to config ESLint to the Vue specs (Prettier has little config options by design). So that is what the .eslintrc.js file is for.

In your code editor, you'll want to install a Prettier Eslint plugin and "Format on Save" to true. The settings for "prettier-eslint” should have a toggle for "Run Prettier Last", you want that set to false. Although often times this is the default setup for plugins. We need ESLint to run last, this ensures the Vue Recommended specs get priority, not Prettier's specs.

The 4 devDependencies installed in the package are "eslint", "eslint-plugin-vue", "prettier" and "prettier-eslint". The "prettier" plugin is not required as most editor plugins will use a default version they ship with, although we have more control over the version of Prettier if we include it in the package file, so we include it to be safe. It also means it would run the same server side or client side if you do that as part of CI. "prettier-eslint" is used to integrate "prettier" and "eslint" together, and get them running one after the other.

Instructions for VS Code

Plugins

  1. Delete the .vscode file from your repo
  2. Install the Prettier-ESlint extension
  3. Install the Vetur extension
  4. Install Vue Dev tools for your browser.

Set Prettier-ESLint as the default formatter

  1. Open a component such as ExampleComponent.vue and CMD + Shift + P to open the command palette
  2. Search Format Document With and select it
  3. Choose the bottom item Configure Default Formatter
  4. Choose Prettier ESLint

Set Format on Save

  1. Open Code > Preferences > Settings
  2. Type Format on and select it
  3. Check Format on Save

Set JS formatter within Vetur

  1. Go to Code > Preferences > Settings
  2. Under Extensions, select Vetur
  3. Set Formatter > Default Formatter: JS as Prettier ESLint

Clone this wiki locally