vue在vscode代码格式化

最新推荐文章于 2024-08-15 15:49:49 发布

JavaPub-rodert

最新推荐文章于 2024-08-15 15:49:49 发布

阅读量2.1k

点赞数

分类专栏： vue 文章标签： vscode vue.js 编辑器

JavaPub 分享技术和副业，搜索、爬虫、逆向、web等，及服务端技术教程。

本文链接：https://blog.csdn.net/qq_40374604/article/details/124657343

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在VSCode中安装和配置Prettier、ESLint及Vetur插件，以提升前端开发效率。通过设置分号、单引号、尾随逗号等格式化选项，并确保与项目配置不冲突，实现代码自动格式化和错误检查。同时，禁用内置格式化器，启用ESLint自动修复功能，使代码风格统一，提高团队合作质量。

摘要由CSDN通过智能技术生成

文章目录

安装插件

安装三个插件： Prettier - Code formatter、 ESLint 、 Vetur 。对应的插件图片如下

修改配置文件

MacOS使用 Command + Sheft + P，windows 使用 Ctrl + Sheft + P 搜索首选项:打开设置(json),然后把下面配置粘贴进去：

在这里插入图片描述

{
  // 分号
  "prettier.semi": false,
  "prettier.eslintIntegration": true,
  // 单引号包裹字符串
  // 尽可能控制尾随逗号的打印
  "prettier.trailingComma": "all",
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  // 关闭自带的格式化
  "javascript.format.enable": false,
  // 让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 启用eslint
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 格式化.vue中html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // 让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" // 属性强制折行对齐
    }
  },
  "vetur.format.enable": true,
  "eslint.options": {
    "extensions": [".js", ".vue"]
  },
  "eslint.autoFixOnSave": true,
  "editor.tabSize": 2,
  // 开启行数提示
  "editor.lineNumbers": "on",
  // 去掉 vscode 自带的自动保存 ，vscode 默认也是 false
  "editor.formatOnSave": false,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "extensions.ignoreRecommendations": false,
  "window.zoomLevel": 1,
  "files.autoGuessEncoding": false,
  "workbench.sideBar.location": "left"
}