vscode中vue代码格式相关设置,(个人观点)

目录

设置tab为2空格:

生成代码格式设置:

我的VScode代码格式化,setting.json配置

使用时发现vscode中vue文件的代码块不能折叠

选中变量高亮提醒相同内容

vscode关闭当前光标所在变量自动高亮


代码格式化参考:

在Vscode中配置Vetur,ESlint,Prettier(转载) - 浅巷深念 - 博客园 (cnblogs.com)

设置完在文件夹中新建xxx.vue,打开后在第一行写vue就可以快速生成

效果如下:

设置tab为2空格:

点击左下角的设置,选择设置在设置中搜索tab size,设置成2,这样tab就改为默认的2个空格

生成代码格式设置:

点击用户代码片段

选择下面的vue.json(vue)

 把下面的代码复制到其中

{
	"Print to console": {
		"prefix": "vue"				,
		"body": [
				"<template>"					,
				" <div>"							,
				"   "									,
				" </div>"							,
				"</template>"					,
				""										,
				"<script>"						,
				" export default {"		,
				"   data() {"					,
				"     return {"				,
				"       "							,
				"     }"							,
				"   },"								,
				"   created() {"			,
				"     "								,
				"   },"								,
				"   methods: {"				,
				"     "								,
				"   },"								,
				"   components: {"		,
				"     "								,
				"   },"								,
				"  };"								,
				"</script>\n"					,
				"<style scoped>"			,
				" "										,
				"</style>"						,
				"$2"
			],
		"description": "Log output to console"
	}
}

我的VScode代码格式化,setting.json配置

{
    // 导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,
    // 配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@": "${folder}/src"
    },
    "workbench.startupEditor": "none",
    "path-autocomplete.excludedItems": {},
    //忽略找不到`tsconfig.json` or `jsconfig.json` 
    "vetur.ignoreProjectWarning": true,
    "vetur.completion.scaffoldSnippetSources": {
        "workspace": "💼",
        "user": "🗒️",
        "vetur": "✌"
    },
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    // "editor.detectIndentation": false,
    // 重新设定tabsize 缩进值为2
    "editor.tabSize": 2,
    "liveServer.settings.useBrowserPreview": true,
    "vscode-edge-devtools.fallbackRevision": "@a41122be052fe9616f0def5fe6842fa942930d46",
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
    ],
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    // #让vue中的js按"prettier"格式进行格式化
    // "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue组件中html代码格式化样式
            "wrap_attributes": "force-aligned", //也可以设置为“auto”,效果会不一样
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettier": {
            // Prettier option here
            "trailingComma": "es5", // 多行时,尽可能打印尾随的逗号
            "tabWidth": 2, // 会忽略vetur的tabSize配置
            "useTabs": false, // 是否利用tab替代空格
            "semi": true, // 句尾是否加;
            "singleQuote": true, // 使用单引号而不是双引号
            "arrowParens": "avoid", // allow paren-less arrow functions 箭头函数的参数使用圆括号
        }
    },
    //每次保存的时候将代码按eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    //保存时自动格式化
    "editor.formatOnSave": true,
    "editor.foldingStrategy": "indentation",
    "window.zoomLevel": 1,
    "workbench.colorCustomizations": {
        //当前选项卡颜色
        "tab.activeBackground": "#888888",
        //与选中同内容
        "editor.selectionHighlightBackground": "#828000",
        // "editor.selectionHighlightBorder": "#ecd9d9"
    },
}

使用时发现vscode中vue文件的代码块不能折叠

可以在Ctrl+,的设置中搜索folding,找到floding strategy默认是auto,设置为indentation就可以折叠代码块了

选中变量高亮提醒相同内容

vscode 选中后相同内容高亮的设置 - bp9jISKIN - 博客园

在设置中搜索 workbench.colorCustomizations, 在setting.json中编辑 

"workbench.colorCustomizations": {
        //选中变量高亮+边框
        "editor.selectionHighlightBackground": "#a2bbf8",
        "editor.selectionHighlightBorder": "#ecd9d9"
    },

vscode关闭当前光标所在变量自动高亮

设置中搜索occurrencesHighlight,取消勾选 

Idea 主题导入导出

file->manager idea settings下导入导出

私人存储在阿里云盘

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Visual Studio Code (VSCode) Vue.js 代码格式化通常不是内置的,但你可以安装第三方插件来实现这一功能。Vue官方推荐的插件是 `Prettier` 和 `vetur` 组合,它们提供了 Vue.js代码格式化支持。 要设置 Vue.js代码格式化快捷键,你需要按照以下步骤操作: 1. 安装插件:打开VSCode的命令面板(可以通过 `Ctrl+Shift+P` 或 `Cmd+Shift+P` 快捷键),搜索并安装 "Prettier" 和 "vetur" 插件。 2. 配置格式化:在设置文件 (`settings.json`) 添加或编辑以下内容: ```json { "editor.formatOnSave": true, // 自动格式化保存文件 "vetur.format.defaultFormatter.html": "prettier", // 设置HTML预处理器为Prettier "vetur.format.defaultFormatter.js": "prettier", // 设置JS预处理器为Prettier "vetur.format.defaultFormatter.vue": "prettier", // 设置Vue预处理器为Prettier } ``` 3. 设置快捷键:你可以在 `"keybindings.json"` 文件自定义快捷键。例如,设置格式代码的快捷键: ```json { "key": "cmd+k,cmd+i", // Mac "mac": "cmd+k,cmd+i", "command": "editor.action.formatDocument", "when": "editorTextFocus && extensionKind === 'web'" } ``` 这里假设你想要使用 `Command + K, Command + I` 进行格式化,`extensionKind === 'web'` 确保只有在处理Vue项目时触发格式化。 相关问题: 1. 如何在VSCode安装插件? 2. 我如何找到和编辑VSCode设置文件? 3. 如何查看已安装的快捷键映射?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值