To better understand the benefits of linting your code consider the following image:
By adding the linter to your editor you can detect such issues as you code and before building and running your application.
Before we get started make sure that you have the following prepared:
- Visual Studio Code (obviously!)
- A Vue.js project (you can get up and running fast using this tutorial)
you can install Eslint and vue specific linting rules into your project by first opening a command line window in your project root and using the following command
npm i -D eslint eslint-plugin-vue babel-eslint
or if you're using yarn
yarn add eslint eslint-plugin-vue babel-eslint --dev
Add a new file to your project root called
.eslintrc.js and add the following code inside it
After adding the previous file and code our project will be ready for us to run ESLint on it. The thing is that we don't want to run it manually to know if there are any errors, we want vscode to do it for us. To help us with that we can install the awesome ESLint extension from the marketplace.
After installing the extension, vscode will automatically load and run ESLint on our project code, awesome right?!
In addition, you can configure the extension to run linting on your code when you save the file or while you type, check out the different configuration options in the vscode settings page.
Now that we have the basic configuration setup, you can add more rules to your
.eslintrc.js file to better suit your coding style and standards. You can for example enforce tabs over spaces (not starting a holy war, just an example!) or use single quotes instead of double quotes or even write your own rules.
Check out the ESLint rules page to learn more about the available rules and their usage.
Adding a linter to your tool set is a very beneficial move for both the short and long term.
I hope this small tutorial has helped you to setup basic ESLint integration because when I first came across ESLint I struggled to integrate it properly with vscode.
Don't hesitate to ask me anything in the comments and let me know if you spot any typos or issues.