All Articles

How I config ESLint and Prettier for Vue.js projects with TypeScript.

ESLint and Prettier work fine and help me avoid many code style and code format problems in my codebase. There are some of my ideas, how to config these packages to work with TypeScript.

So, I created a new Vue project with Vue CLI with the Manually select features mode:

vue create my-new-awesome-project

My default TypeScript Vue.js project configuration:

Vue.js with TypeScript configuration.

ESLint, Prettier and most plugins were provided by CLI, but I prefer to add a separate .prettierrc.js config file in the root of the project:

// .prettierrc.js

module.exports = {
  semi: false,
  trailingComma: 'none',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2
}

Also, I prefer to add at least one additional ESLint plugin with a checker for accessibility rules:

npm install eslint-plugin-vue-a11y --save-dev

Add recommended plugin rules in the extends array in your `.eslintrc.js`

{
  extends: [
    'plugin:vue-a11y/recommended'
  ]
}

Finally, create a .eslintignore file in the root of your project:

# don't ever lint node_modules
node_modules

# don't lint nyc coverage output
coverage

Don’t forget to enable Run on save for files option in Preferences | Languages & Frameworks | JavaScript | Prettier if your want to run Prettier on save in WebStorm 2020.1 or above.

Also, on WebStorm 2020.1.1+, add Run eslint --fix on save in Preferences | Languages & Frameworks | JavaScript | Code Quality Tools | ESLint to let ESLint and Prettier work in parallel.