VUE在VSCode中的代码格式化设置

VUE在VSCode中的代码格式化设置

{
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },
    // 开启代码缩略图
    "editor.minimap.enabled": true,
    // JavaScript环境配置
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.ts": "vscode-typescript",
    "vetur.format.defaultFormatter.css": "prettier",
    // 一个tab等于两个字符
    "prettier.tabWidth": 2,
    // 函数括号前是否加空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 函数括号后是否加空格
    "javascript.format.insertSpaceAfterConstructor": true,
    "typescript.format.insertSpaceAfterConstructor": true,
    // 搜索时排除以下文件夹
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/target": true,
        "**/logs": true
    },
    // 一个tab等于两个字符
    "editor.tabSize": 2,
    // 文件移动时更新import引入路径
    "javascript.updateImportsOnFileMove.enabled": "always",
    "terminal.integrated.rendererType": "dom",
	// 保存时按照配置自动格式化代码
    "eslint.autoFixOnSave": true,
    // eslint适用的语言配置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // eslint适用的文件配置
    "eslint.options": {
        "extensions": [".js", ".vue"]
    },
    // 代码快速提示
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    // 自动猜测文件编码
    "files.autoGuessEncoding": true,
    // 打开编辑器时默认打开一个空文件
    "workbench.startupEditor": "newUntitledFile",
    // elementUI代码提示版本
    "element-helper.version": "2.4"
}
在 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、付费专栏及课程。

余额充值