How to configure VS Code for Vue.js projects

Recently, I have started to play around with Vue.js. While it looks very promising, I had a difficult time to run it in VS Code. It took sometimes to add necessary plugins and tweak some settings to reach a desirable result. That’s why I decided to share my experience on how to configure VS Code for Vue.js projects.

Installing some plugins

First of all, we need to install some plugins. Of course, you can skip some of them if are not useful for you or you have a better alternative. I mention which are must to have and which are optional.

The most crucial plugin is Vetur which does syntax highlighting, linting, error checking and so on for Vue.js projects. You must install it if you want to work with any Vue project.

The next plugins are kind of optional but I highly recommend them to install to make your development easier as well as having a cleaner codebase. The first one is ESLint that can be configured to run linting when saving any file, explained later how. And Prettier that does code formatting. Not only for JS but many types of files such as JSON, YAML, etc. In my opinion, it is much superior to the built-in one.

Applying some configurations

After installing the necessary plugins we need to apply some configurations to make the most of them.

For that, we need to modify settings.json file of the VS Code. To open the file first need to open Command Palette, press <code>⌘⇧p or ^<code>⇧p. Then type settings.json. Then we can start modifying the file.

The first setting we going to add is to automatically format the code when saving the file. For that add the below line to the file,

"editor.formatOnSave": true

The next setting is running prettier linting. For that add this line,

"prettier.eslintIntegration": true

Lastly, we want if linting found something, automatically correct it. For that need to add a few blocks of configuration as follow,

    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        }
    ]

And that’s all. We are done. I hope you enjoy it and happy coding!