首页 > 其他分享 >VS Code保存后自动格式化Vue代码

VS Code保存后自动格式化Vue代码

时间:2023-01-28 17:22:06浏览次数:51  
标签:Code 格式化 Vue VS editor false true

    在VS Code里面编辑Vue代码,通常我们会安装插件Vetur,本次介绍的格式化代码也依赖于Vetur插件。具体见一下步骤

 注: VS Code版本为1.74.3

    1. 安装插件Vetur

 

 2. 配置自动格式化,具体路径【文件】-【首选项】-【设置】,打开设置(json)

 

 3. 将以下内容复制到settings.json

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    "editor.fontSize": 22,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // 一个tab 代表4个空格宽度
    "vetur.format.options.tabSize": 4,
    // 编辑器默认格式化工具 很重要
    "editor.defaultFormatter": "octref.vetur",
    // 配置格式化工具的选项 根据需要自己配置
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            // Prettier option here https://prettier.io/docs/en/options.html
            // 字符串单引号
            "singleQuote": true,
            // 去掉行末尾分号要
            "semi": false,
            // 箭头函数 参数需要()包起来
            "arrowParens": "always",
            // 是否用tab  false的话用空格代替tab
            "useTabs": false,
            // 去掉对象末尾的逗号
            "trailingComma": "none"
        }
    }
}

  完成以上配置,即可实现VS Code编辑代码后自动格式化代码

 

标签:Code,格式化,Vue,VS,editor,false,true
From: https://www.cnblogs.com/wangacan/p/17070913.html

相关文章

  • Target 塔吉特DVS EDI 业务测试指南
    Target塔吉特是美国仅次于Walmart沃尔玛的第二大巨型折扣零售百货集团,由于拓展了其数字化履约能力,使得越来越多的国内零售产品供应商和Target建立合作关系。Target要求其供......
  • Educational Codeforces Round 2 个人总结A-D
    EducationalCodeforcesRound3A.USBFlashDrives降序排序后,贪心,甚至不会爆longlongvoidsolve(){intn,m;cin>>n>>m;vector<int>a(n);for(......
  • vs2022创建c语言的dll项目
    1.创建项目  2.创建完成不需要删除自动生成的文件3.修改项目属性右键单击--->c/c++--->常规----->附件包含目录------>这里不用 c/c++----->预处理器------->......
  • Vue在子组件中修改Props的几种情况
    首先列举平常使用Vue父组件传递数据到子组件的几种情况传递的是基础数据类型(Number,Boolean,String)传递的是引用类型(Object,Array)结论当传给子组件的Prop为基本数据类......
  • Codeforces Round #801 (Div. 2) and EPIC Institute of Technology Round A - D
    题目链接A#include<iostream>#include<cstring>#include<algorithm>usingnamespacestd;#defineintlonglongconstintN=1e3+10;intn,m;intg[N][N......
  • LeetCode-1664 生成平衡数组的方案树
    题目描述来源:力扣(LeetCode)链接:https://leetcode.cn/problems/ways-to-make-a-fair-array 给你一个整数数组 nums 。你需要选择恰好 一个下标(下标从0 开始)并删除......
  • vscode 利用正则 搜索标签 tags (?=.*关键字1)(?=.*关键字2).*
    vscode利用正则搜索标签(?=.关键字1)(?=.关键字2).*这里关键词是可以多个并且不按照顺序搜索的,就是写起来需要(?=.关键字)最后.结尾我是不是需要制作一个转换的小......
  • Codeforces Round #847 F
    F.TimofeyandBlack-WhiteTree题链因为是一棵树的形式我们不妨考虑dpdp[u]表示u节点子树内黑点离u的最近距离我们每添加一个点当然会更新他及他链上面父亲的dp值......
  • leetcode_数据结构_入门_566. 重塑矩阵
    566.重塑矩阵 在MATLAB中,有一个非常有用的函数reshape,它可以将一个 mxn矩阵重塑为另一个大小不同(rxc)的新矩阵,但保留其原始数据。给一个由二维数组mat表示......
  • Target 塔吉特DVS EDI 业务测试指南
    Target塔吉特是美国仅次于Walmart沃尔玛的第二大巨型折扣零售百货集团,由于拓展了其数字化履约能力,使得越来越多的国内零售产品供应商和Target建立合作关系。Target要求其供......