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,
}

之后保存,即可。

总结

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

相关文章

  • vue 系列——vue2-webpack2框架搭建踩坑之路

    vue 系列——vue2-webpack2框架搭建踩坑之路

    本文从零搭建vue项目,给大家分享了我的vue2-webpack2框架搭建踩坑之路,需要的朋友可以参考下
    2017-12-12
  • Vue3监听属性与Computed的区别详解

    Vue3监听属性与Computed的区别详解

    在 Vue 3 中,watch 和 computed 都是非常重要的概念,它们都可以用于观察和响应数据的变化,但在使用场景和原理上存在明显的区别,本文将详细解析 Vue 3 中监听属性 (watch) 和计算属性 (computed) 的区别,需要的朋友可以参考下
    2024-02-02
  • vue中下载文件后无法打开的坑及解决

    vue中下载文件后无法打开的坑及解决

    这篇文章主要介绍了vue中下载文件后无法打开的坑及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    vue3+vite多项目多模块打包(基于vite-plugin-html插件)

    这篇文章主要给大家介绍了关于vue3+vite基于vite-plugin-html插件实现多项目多模块打包的相关资料,现在很多小伙伴都已经使用Vite+Vue3开发项目了,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    这篇文章主要介绍了vue中实现当前时间echarts图表时间轴动态的数据,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • vue在mounted中window.onresize不生效问题及解决

    vue在mounted中window.onresize不生效问题及解决

    这篇文章主要介绍了vue中在mounted中window.onresize不生效问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3+TS实现动态路由权限的示例详解

    Vue3+TS实现动态路由权限的示例详解

    当我们在开发一个大型的前端应用时,动态路由权限是一个必不可少的功能,本文将介绍如何使用Vue 3和TypeScript来实现动态路由权限,希望对大家有所帮助
    2024-01-01
  • antd vue 如何调整checkbox默认样式

    antd vue 如何调整checkbox默认样式

    这篇文章主要介绍了antd vue 如何调整checkbox默认样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue实现点击展开点击收起效果

    vue实现点击展开点击收起效果

    这篇文章主要介绍了vue实现点击展开,点击收起效果,首先我们需要定义data里面的数据,使用computed对data进行处理,需要的朋友可以参考下
    2018-04-04
  • vue使用el-table动态合并列及行

    vue使用el-table动态合并列及行

    这篇文章主要为大家详细介绍了vue使用el-table动态合并列及行,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论