OverVue.dev

# VsCode

# Extensions

# Vetur

vetur

# ESLint and Prettier

ESLint and Prettier

# Configure ESLint

Either in the .eslintrc.js file or package.json (depending on the Vue CLI install options)








 











module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:prettier/recommended', // Add this line
    '@vue/prettier'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Configuring Prettier

Create a .prettierrc.js file in the root folder of the project.

touch .prettierrc.js

  
        Copied!
1
# Input (.prettierrc.js)

For instance, to force single quote '' instead of double quote "" and automatically add semi columns (a personal preference)

module.exports = {
  singleQuote: true,
  semi: false
}

  
        Copied!
1
2
3
4

# User Settings (json)

# Vetur

To configure linting rules: see why

"vetur.validation.template": false

  
        Copied!
1

# ESLint

Search for eslint.validate in the settings and add the following:

# input

"eslint.validate": [
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "javascript",
        "autoFix": true
    }
],

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Also add :

"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

  
        Copied!
1

←