All Articles

How to config Prettier and ESLint to use single quotes and omit semicolons in Vue.js

You should add these simple rules into your Prettier and ESLint configurations to use single quotes and omit semicolons in Vue.js.

Prettier (even global installed) uses a configuration file nearest to the current file (up the directory tree) when formatting.

So, you can install it globally and configure it in your project, by adding the corresponding .prettierrc file or the "prettier" section in the project package.json.

These updates in .eslintrc.js should highlight ESLint warnings for updated rules:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        trailingComma: 'none'
      }
    ],
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

This block in your package.json file should help Prettier fix these warnings:

"prettier": {
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none"
  }

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.