I'm a 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 ( , ). gopher 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. and . Vue 2 Snippets will basically just provide some Vue specific auto completes, but Eslint will do the more important work of linting our code. Vue 2 Snippets Eslint You will also want to add the following to your project using our package manager's if you don't already have them: devDependencies yarn yarn yarn yarn yarn yarn yarn yarn add eslint --dev add eslint-plugin-import --dev add eslint-plugin-node --dev add eslint-plugin-promise --dev add eslint-plugin-standard --dev add eslint-plugin-vue --dev add @vue/eslint-config-standard --dev 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 folder, and inside of that folder there is a file. VS Code will use these settings automatically for this directory. .vscode settings.json 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 file in the root of our project to configure linting settings, but .eslintrc.json Tells VS Code we use yarn. (Chane to if that's what you use) yarn npm 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 if you have any questions or comments @q_vault Take game-like coding courses on Qvault Classroom to our Newsletter for more educational articles Subscribe

Twitter

Go-CoNLLU Introduction: OSS Tool For Machine Learning Support in Go

How to Run Go in Your Browser With Web Assembly [ Tutorial ] 

Learn to code on Boot.dev

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mathematics

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptography

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Online Education

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for Super Career Strategist of 2022

Too Long; Didn't Read

Make resilience your competitive advantage

How To Set Up Vue Linting in VS Code

How To Set Up Vue Linting in VS Code

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Complete Overview of Cryptography

10 ESLint Rules You Should Use

How to Build A Well Structured 3-tier Architecture (MERN Stack - ES6) [Step-by-Step Guide]

A quick overview of ESLint Configuration Comments

Set Up Airbnb’s Linter (React + Node)

A Complete Overview of Cryptography

10 ESLint Rules You Should Use

How to Build A Well Structured 3-tier Architecture (MERN Stack - ES6) [Step-by-Step Guide]

A quick overview of ESLint Configuration Comments

Set Up Airbnb’s Linter (React + Node)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps