Vue或React结合JavaScript Standard Style,格式化代码

一、Vue,格式化配置

1. 依赖文档格式化插件,Prettier - Code formatter,Vetur,StandardJS - JavaScript Standard Style

 Vue或React结合JavaScript Standard Style,格式化代码_第1张图片

 

2. 设置settings.json(文件 --> 首选项 --> 设置 --> 工作区设置)

Vue或React结合JavaScript Standard Style,格式化代码_第2张图片

// settings.json

{
  "editor.tabSize": 2,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": true,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  "prettier.jsxSingleQuote": true,
  "standard.autoFixOnSave": true,
  "standard.validate": [
    "javascript",
    "javascriptreact",
    "html"
  ]
}

 3. 项目的package.json配置

安装开发依赖,standard

npm install --save-dev standard

配置 package.json

"standard": {
    "ignore": [
      "/test",
      "/node_modules",
      "*.test.js"
    ],
    "parser": "babel-eslint",
    "global": [
      "$http",
      "sessionStorage",
      "localStorage"
    ]
  }

如图位置:

Vue或React结合JavaScript Standard Style,格式化代码_第3张图片


二、React 格式化配置

参考以上的2,3步骤 

你可能感兴趣的:(Vue,React)