vue文件代码缩进以及格式化代码方式[自定义]

 更新时间:2024年03月18日 17:15:47   作者:终究是半圈  
这篇文章主要介绍了vue文件代码缩进以及格式化代码方式[自定义],具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue文件代码缩进及格式化代码[自定义]

文件->首选项->设置->

找到setting.json 替换以下内容。

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 3000,
    "files.associations": {
        "vue-html": "html",
        "vue": "html"
    },
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "editor.detectIndentation": false,
    "window.zoomLevel": 0,
    "npm.enableRunFromFolder": true,
    "vetur.format.options.tabSize": 4,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    }
}

vue项目中常用的格式化代码

1.首先在Vscode编辑器中,同时按下 Shift + Ctrl + P,

2.在出现的搜索框中输入settings后,按下Enter键,

3.在出现的settings.json中粘贴如下代码。

{
  "git.enableSmartCommit": true,
  // 修改注释颜色
  "editor.tokenColorCustomizations": {
    "comments": {
      "fontStyle": "bold",
      // "foreground": "#82e0aa"
    }
  },
  // 配置文件类型识别
  "files.associations": {
    "*.js": "javascript",
    "*.json": "jsonc",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "extensions.ignoreRecommendations": false,
  "files.exclude": {
    "**/.DS_Store": true,
    "**/.git": true,
    "**/.hg": true,
    "**/.svn": true,
    "**/CVS": true,
    "**/node_modules": false,
    "**/tmp": true
  },
  // "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDragAndDrop": false,
  "typescript.updateImportsOnFileMove.enabled": "prompt",
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "editor.fontWeight": "500",
  "[json]": {},
  "editor.tabCompletion": "on",
  "vsicons.projectDetection.autoReload": true,
  // "editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.fontSize": 16,
  "debug.console.fontSize": 14,
  "vsicons.dontShowNewVersionMessage": true,
  "editor.minimap.enabled": true,
  "emmet.extensionsPath": [
    ""
  ],
  // vue eslint start 保存时自动格式化代码
  "editor.formatOnSave": true,
  // eslint配置项,保存时自动修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "vetur.ignoreProjectWarning": true,
  // 让vetur使用vs自带的js格式化工具
  // uni-app和vue 项目使用
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "javascript.format.semicolons": "remove",
  // // 指定 *.vue 文件的格式化工具为vetur
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // // 指定 *.js 文件的格式化工具为vscode自带
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  // // 默认使用prettier格式化支持的文件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.jsxBracketSameLine": true,
  // 函数前面加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  // eslint end
  // react
  // 当按tab键的时候,会自动提示
  "emmet.triggerExpansionOnTab": true,
  "emmet.showAbbreviationSuggestions": true,
  "emmet.includeLanguages": {
    // jsx的提示
    "javascript": "javascriptreact",
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // end
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // @路径提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "security.workspace.trust.untrustedFiles": "open",
  "git.ignoreMissingGitWarning": true,
  "editor.fontSize": 15,
  "window.zoomLevel": 1.5,
}

之后保存,即可。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3.0报错Cannot find module‘worker_threads‘的解决办法

    vue3.0报错Cannot find module‘worker_threads‘的解决办法

    这篇文章介绍了vue3.0报错Cannot find module‘worker_threads‘的解决办法。对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台。这篇文章主要介绍了Vue+SpringBoot开发V部落博客管理平台,需要的朋友可以参考下
    2017-12-12
  • vue3+element-plus+vite实现动态路由菜单方式

    vue3+element-plus+vite实现动态路由菜单方式

    文章详细介绍了如何使用Vite搭建一个Vue 3 TypeScript项目,并配置了路由、状态管理、插件和环境,项目结构包括路由持久化、白名单、动态路由和权限控制,此外,还模拟了一个后端返回的路由数据文件
    2025-01-01
  • 详解如何添加babel polyfill

    详解如何添加babel polyfill

    这篇文章主要介绍了详解vue如何添加babel polyfill实现方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • VueQuillEditor富文本上传图片(非base64)

    VueQuillEditor富文本上传图片(非base64)

    这篇文章主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue前端高效开发之列表渲染指令

    Vue前端高效开发之列表渲染指令

    这篇文章主要给大家介绍了关于Vue前端高效开发之列表渲染指令的相关资料,vue.js 使用的是 v-for 指令来处理组件元素的循环迭代逻辑,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-06-06
  • 将vue项目打包成电脑端应用.exe的完整步骤

    将vue项目打包成电脑端应用.exe的完整步骤

    最近接了个小活,其中甲方要求把vue项目打包成exe安装在windows上,其中有也会出现一些小问题和优化,特此记录,这篇文章主要给大家介绍了关于将vue项目打包成电脑端应用.exe的完整步骤,需要的朋友可以参考下
    2023-10-10
  • vue项目中axios配置方式(代理配置)

    vue项目中axios配置方式(代理配置)

    这篇文章主要介绍了vue项目中axios配置方式(代理配置),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue3中的toRef和toRefs的区别和用法示例小结

    Vue3中的toRef和toRefs的区别和用法示例小结

    toRef和toRefs可以用来复制reactive里面的属性然后转成 ref,它保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,本文介绍Vue3中toRef和toRefs的区别和用法,需要的朋友可以参考下
    2024-08-08
  • axios解决高并发的方法:axios.all()与axios.spread()的操作

    axios解决高并发的方法:axios.all()与axios.spread()的操作

    这篇文章主要介绍了axios解决高并发的方法:axios.all()与axios.spread()的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论