Basic Vue/VS Code -/- Command Line Configuration

vue-cheat-sheet.md

VS Code

Plugins

• https://github.com/vuejs/vetur » Docs
• https://github.com/Microsoft/vscode-eslint
• https://github.com/prettier/prettier-vscode
• https://github.com/editorconfig/editorconfig-vscode » EditorConfig

Configuration

settings.json (VS Code config):

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
      "html",
      "vue",
      "javascript",
      "typescript",
      "javascriptreact",
      "typescriptreact"
  ],
  "vetur.validation.template": false,
  "prettier.printWidth": 65536
}

ESLint

• https://eslint.org/docs/user-guide/command-line-interface
  • $ npx eslint "src/**/*.{js,vue}"
  • $ npx eslint "src/**/*.{js,vue}" --fix-dry-run
  • $ npx eslint "src/**/*.{js,vue}" --fix
• https://eslint.vuejs.org/
• https://vuejs.github.io/vetur/linting-error.html#linting
• https://alligator.io/vuejs/vue-eslint-prettier/

Configuration

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: [
    "plugin:vue/recommended",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  parserOptions: {
    parser: "babel-eslint",
    module: "module"
  },
  rules: {
    "vue/html-self-closing": "off",
    "vue/max-attributes-per-line": "off",
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  }
}

Prettier

• https://github.com/prettier/prettier » CLI
  • npx prettier -c "src/**/*.{html,js,vue}"
  • npx prettier --write "src/**/*.{html,js,vue}"
• npm install --save-dev eslint-plugin-prettier
• npm install --save-dev eslint-config-prettier
• Prettier option vue-indent-script-and-style is not used

Configuration

.prettierrc.js:

module.exports = {
  semi: false,
  printWidth: 65536,
  vueIndentScriptAndStyle: true
}

Other(s)

.browserlistrc

> 1%
last 2 versions

.editorconfig:

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = false