How to setup VSCode for Vuejs (JavaScript) development
Visual Studio Code is a lightweight but powerful & fast cross platform source code editor. Although It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP, Go) and runtimes (such as .NET and Unity).
In this post I will explain how to get best possible development experience for VueJs using VSCode using available extensions and configuration options.
Installation
Install Vue.js Extension Pack from the VSCode Market Place, which will automaticaly install all the required extensions.
Open VSCode and search for Vue.js Extension Pack in the extension store. Click install, wait for all the dependdies to finish install and then Restart VSCode.
Setup ESLint
ESLint is a configurable linter tool for identifying and reporting on patterns in JavaScript and HTML/VUE files.
ESLint Installation
Add these to dev dependies of your project package.json
.
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1"
This will install ESLint and required ESLint plugins to enable linting support. You can also install these packages globallay using npm install -g pakcage_name
Configure ESLint
Now we need to configure ESLint to enable linting support for .vue
files. There are two necessary steps to do this:
VSCode user settings
Open user settings from the menu (Ctrl + ,
to open) and add the following settings.
"eslint.enable": true, //Enable eslint
"eslint.options": {
"extensions": [ //List of file extensions to activate eslint
".html",
".js",
".vue",
".jsx"
]
},
"eslint.validate": [{ //list of extensions to validate
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true //Autofix any fixable errors when linting
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
// Run the linter on save (onSave) or on type (onType)
"eslint.run": "onSave",
"eslint.autoFixOnSave": true //Autofix any fixable errors when linting
Adding .eslintrc.json (in root of the project folder)
Now we need to add a rule configuration file for the ESLint in our project. This can be either done manualy, but recomended to use command line in VSCode. Press CTRL + Shift + p
to open command panel in VSCode, search eslint
and select Create .eslintrc.json File
in the list.
Make changes to .eslintrc.json
file to enable vue
eslint plugin make it look like this:
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
"extends": "standard",
// required to lint *.vue files
"plugins": [
"html"
],
"rules": {
"no-const-assign": "warn",
"no-this-before-super": "warn",
"no-undef": "warn",
"no-unreachable": "warn",
"no-unused-vars": "warn",
"constructor-super": "warn",
"valid-typeof": "warn"
}
}
What’s next
Now you are ready to devlop using VueJs with best support from VSCode for Code Format, Intellisense, Snippets, Tag Editing and Linting support.