IDE integration
Linting and other parts of the tooling can be integrated to most common editors. Each editor generally has extensions that will read the same configuration that the Webpack and command line tools use, so you will get an IDE experience that's consistent with the other tools.
Visual Studio Code
Workspace configuration is included in the project. The configuration instructs VS Code about certain file location, how to treat certain file extensions, and configure some commonly used extensions to work with the project, including single-file .vue components.
.vscode/
└── settings.json
Installing the following extensions for VS Code will make your life easier:
| Extension | Description |
|---|---|
| EditorConfig for VS Code | Adds support for .editorconfig auto formatting rules. |
| ESLint | Integrate JavaScript linting direclty in the editor. |
| npm | Adds support for running npm scripts and validating the installed modules against package.json. |
| npm IntelliSense | Autocompletes npm modules in import statements. |
| Stylelint | Integrate (S)CSS linting directly in the editor. |
| TODO Highlight | Highlights TODO, FIXME and other similar comments in the editor. |
| Version Lens | Visualizes the installed versions of packages and easily update versions when editing package.json. |
| vetur | Supports common editor features in single-file components better (since .vue files use several different languages). |
There are many other good extensions in the Marketplace as well. Extensions can be installed directly from the editor.
VS Code will show linting issues inline while editing, and also as a list in the problems toolbar.