XFE 技术 生活 笔记 文集

vue 项目配合 vscode 格式化

🔖 开发工具 👀 28 🕒 2019-11-06 👨‍🎓 XFE/Peter

准备的vscode 插件

  • ESLint
  • Prettier

配置vscode

全局 setting.json 中添加如下的内容

{
   "vetur.format.defaultFormatter.html": "js-beautify-html", 

    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    "files.associations": {
        "*.vue": "vue"
    },
    "prettier.printWidth": 120,
    "prettier.semi": false,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "vetur.format.options.useTabs": true
}

添加项目配置文件

  • .prettierrc
{
  "Semicolons": true,
  "tabWidth": 2,
  "bracketSpacing": true,
  "arrowFunctionParentheses": "avoid"
}
  • .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-mixed-spaces-and-tabs": "off",
    "no-await-in-loop": true,
    curly: true,
    "dot-location": true,
    eqeqeq: "always"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};