paint-brush
How To Set Up Vue Linting in VS Codeby@wagslane
5,244 reads
5,244 reads

How To Set Up Vue Linting in VS Code

by Lane WagnerAugust 13th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

How To Set Up Vue Linting in VS Code in Vue.js. Vue 2 Snippets and Eslint will do the more important work of linting our code. We need to use a.eslintrc.json file in the root of our. project to configure lint. settings, but Tells VS Code we use yarn. (Chane yarn to. npm if that's what you use) Fixes all. errors on save (to the best of its ability) Forcing all line endings to UNIX style (LF) instead of Windows (CRLF)

Company Mentioned

Mention Thumbnail
featured image - How To Set Up Vue Linting in VS Code
Lane Wagner HackerNoon profile picture

I'm a gopher by nature, so I expect consistent styling and linting in my codebases. More importantly, though, I don't like to think about styling. I like to type haphazardly and then have my editor apply styling automatically on save (ctrl+s, cmd+s).

If you are the same way, hopefully, this will help you in your next Vue.js project.

VSCode - Download and Plugin

Download VS Code

After downloading VSCode, we are going to use 2 plugins. Vue 2 Snippets and Eslint. Vue 2 Snippets will basically just provide some Vue specific auto completes, but Eslint will do the more important work of linting our code.

You will also want to add the following to your project using our package manager's devDependencies if you don't already have them:

yarn add eslint --dev
yarn add eslint-plugin-import --dev
yarn add eslint-plugin-node --dev
yarn add eslint-plugin-promise --dev
yarn add eslint-plugin-standard --dev
yarn add eslint-plugin-vue --dev
yarn add @vue/eslint-config-standard --dev
yarn add babel-eslint --dev

Configuring the settings

Now that everything is installed, we just need to do some final setup. VS Code has a GUI for setting preferences, but I tend to just use the JSON file for simplicity sake. In the root of your project ensure that you have a .vscode folder, and inside of that folder there is a settings.json file. VS Code will use these settings automatically for this directory.

Paste in these configurations:

{
  "files.eol": "\n",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.options": {
    "configFile": ".eslintrc.json"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.packageManager": "yarn"
}

This accomplishes several important things.

  • It specifies that we will use a .eslintrc.json file in the root of our project to configure linting settings, but
  • Tells VS Code we use yarn. (Chane yarn to npm if that's what you use)
  • Fixes all linting errors on save (to the best of its ability)
  • Forces all line endings to UNIX style (LF) instead of Windows (CRLF)

ESLint Config

We need to set our linting rules:

{
  "root": true,
  "env": {
    "node": true,
    "mocha": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "rules": {
    "comma-dangle": "error",
    "quotes": [
      "error",
      "single"
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "array-bracket-spacing": [
      "error",
      "always"
    ],
    "semi": [
      "error",
      "always"
    ],
    "eol-last": [
      "error",
      "always"
    ],
    "indent": [
      "error",
      2
    ]
  },
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module",
    "allowImportExportEverywhere": true,
    "ecmaVersion": 2019
  }
}

You can obviously change this but this is my boilerplate for Vue CLI projects. This will do things like enforce consistent tab sizes, semicolon usage and array spacing.

Done!

If you have any questions or if you've noticed that this article has become obsolete please leave a comment and let me know.

Thanks For Reading

Follow us on Twitter @q_vault if you have any questions or comments

Take game-like coding courses on Qvault Classroom

Subscribe to our Newsletter for more educational articles