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

最新推荐文章于 2023-10-09 23:23:54 发布

海贼8023

最新推荐文章于 2023-10-09 23:23:54 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue React 文章标签： VS Code

本文链接：https://blog.youkuaiyun.com/Loya0813/article/details/88687589

React 同时被 2 个专栏收录

4 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

本文介绍了如何在VS Code中为Vue和React项目配置代码格式化，包括使用Prettier、Vetur、StandardJS等插件，并详细说明了在settings.json和package.json中的配置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Vue，格式化配置

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

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

// 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"
    ]
  }

如图位置：