Vue + ESLint + Standard saves automatic formatting

Vscode plug-in

ESLint
standard
Prettier-Standard - JavaScript formatter
StandardJS - JavaScript Standard Style
vue
Copy the code

The vscodesetting.json

{
  "editor.formatOnSave": true,
  "standard.autoFixOnSave": true,
  "standard.enable": true,
}
Copy the code

Vue program.eslintrc

Automatically generated files

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

Copy the code

Use vscode plug-in and user setting configuration

{
  "editor.formatOnSave": true,
  "standard.autoFixOnSave": true,
  "standard.enable": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-great-icons",
  "editor.fontSize": 16,
}
Copy the code