ES Lint, Prettier, Vetur, VSCode: Ironing out the conflicts

Lindsey Bradford — Sat, 11 Apr 2020 13:21:13 +0000

I recently discovered something more was needed than the out of the box Vue CLI ESLint setup to settle the disputes between prettier, eslint, VSCode's default formatter, and which one fired when on-save vs. on keyboard shortcuts.

This is a quick summary of my workspace configs, but for more of a deep dive, check out this article.

Packages

prettier
eslint-config-prettier
eslint-plugin-prettier
@vue/eslint-config-standard
babel-eslint
eslint
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise
eslint-plugin-standard
eslint-plugin-vue

Keybindings

Remove any existing formatting commands attached to the ctrl+shift+i shortcut and bind this instead to EsLint Fix All Auto-Fixable Problems (tip: you can search by both command and keybinding in Keyboard Shortcuts).

Workspace Settings.json

{
  "vetur.validation.template": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: ['prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/component-name-in-template-casing': ['error', 'PascalCase']
  }
}

.prettierrc

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

I'll continue to dial these settings in, and plan to expound more here on exactly why these configs work, but this got me up and running past those pesky formatting/linting conflicts in a pinch.