vue格式化,用tab写4个空格的问题

强迫症的福音
环境vue脚手架+vscode
我们安装脚手架或者下载大神们的框架的时候,里面书写的格式和自己的不一致,什么空格啊,引号,对其方式啊,很折磨人
我们来统一一下
1.安装vetur+prettier
在这里插入图片描述
2.设置vscode
文件-》首选项-》设置
在这里插入图片描述
在这里插入图片描述

 // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "vetur.format.options.tabSize": 4,
    "vetur.format.options.useTabs": true,
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "prettyhtml": {},
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    "window.zoomLevel": 0,
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "editor.renderControlCharacters": true,
    "editor.renderWhitespace": "all",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

以上是我的设置
然后在页面上 ctrl+s自动保存

??
??
不是想要的格式?报错?一大堆红色,黄色的波浪?
在这里插入图片描述

框架里有这个文件吗?没有自己来一个,这个是修改pretter的配置的
个人感觉优先级比vscode里的配置优先级高一写
注意这是vetur + prettier的配置,保存会自动格式化

module.exports = {
	printWidth: 100,
	tabWidth: 4,
	useTabs: true,
	semi: true,
	singleQuote: false,
	quoteProps: "as-needed",
	jsxSingleQuote: false,
	trailingComma: "es5",
	bracketSpacing: true,
	jsxBracketSameLine: false,
	arrowParens: "always",
	vueIndentScriptAndStyle: false,
	endOfLine: "lf",
	// htmlWhitespaceSensitivity: "ignore",
};

问题还有,就是eslint它不认啊。依旧报错, 它默认是2个空格作为缩进,我们这样一下子就是tab,按一下tab就是4个空格,看上去比2个空格舒服。
在.eslintrc.js文件里加上

 "prettier/prettier": 0,

在这里插入图片描述

因为我的编辑器已有格式化插件prettier,意思是让eslint忽略pretteir的格式化,不发出警告

“off” or 0 - 关闭(禁用)规则 
“warn” or 1 - 将规则视为一个警告(并不会导致检查不通过) 
“error” or 2 - 将规则视为一个错误 (退出码为1,检查不通过) 

下面这个配置,大家可以看到,非常严格
出现了很多的2
定义重复,重复键值对,写上了,你代码基本就跑不起来了,看看就好
如果出现黄色波浪,那你要根据提示更改代码,规范自己的写法了。

"no-mixed-spaces-and-tabs": 0,
        // allow debugger during development
        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
        // "indent": [1, "tab"], //缩进设置
        "vue/no-parsing-error": [
            2,
            {
                "x-invalid-end-tag": false,
            },
        ],
        "object-curly-spacing": [1, "always"], //非空对象首位必须加上空格
        "no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符
        "no-dupe-args": 2, //函数定义的时候不允许出现重复的参数
        "no-dupe-keys": 2, //对象中不允许出现重复的键
        "no-duplicate-case": 2, //switch语句中不允许出现重复的case标签
        "no-empty": 2, //不允许出现空的代码块
        "no-empty-character-class": 2, //正则表达式中不允许出现空的字符组
        "no-ex-assign": 2, //在try catch语句中不允许重新分配异常变量
        "no-extra-boolean-cast": 2, //不允许出现不必要的布尔值转换
        "no-extra-semi": 2, //不允许出现不必要的分号
        "no-func-assign": 2, //不允许重新分配函数声明
        "no-inner-declarations": ["error", "functions"], //不允许在嵌套代码块里声明函数
        "no-invalid-regexp": 2, //不允许在RegExp构造函数里出现无效的正则表达式
        "no-irregular-whitespace": 2, //不允许出现不规则的空格
        "no-negated-in-lhs": 2, //不允许在in表达式语句中对最左边的运算数使用取反操作
        "no-obj-calls": 2, //不允许把全局对象属性当做函数来调用
        "no-regex-spaces": 2, //正则表达式中不允许出现多个连续空格
        "no-unreachable": 2, //在return,throw,continue,break语句后不允许出现不可能到达的语句
        "use-isnan": 2, //要求检查NaN的时候使用isNaN()
        // "valid-jsdoc": [1, {
        //     "requireReturn": false,
        //     "requireParamDescription": false,
        //     "requireReturnDescription": true
        // }], //强制JSDoc注释
        "valid-typeof": [
            "error",
            {
                requireStringLiterals: true,
            },
        ], //在使用typeof表达式比较的时候强制使用有效的字符串
        "block-scoped-var": 2, //将变量声明放在合适的代码块里
        eqeqeq: [1, "smart"], //比较的时候使用严格等于
        "no-alert": 1, //不允许使用alert,confirm,prompt语句
        "no-caller": 2, //不允许使用arguments.callee和arguments.caller属性
        "no-eq-null": 2, //不允许对null用==或者!=
        "no-eval": 1, //不允许使用eval()
        "no-extra-bind": 2, //不允许不必要的函数绑定
        "no-floating-decimal": 2, //不允许浮点数缺失数字
        "no-implied-eval": 2, //不允许使用隐式eval()
        "no-iterator": 2, //不允许使用__iterator__属性
        "no-lone-blocks": 2, //不允许不必要的嵌套代码块
        "no-multi-spaces": 2, //不允许出现多余的空格
        "no-multi-str": 2, //不允许用\来让字符串换行
        "no-global-assign": 2, //不允许重新分配原生对象
        "no-octal": 1, //不允许使用八进制字面值
        "no-octal-escape": 1, //不允许使用八进制转义序列
        "no-param-reassign": 0, //不允许重新分配函数参数"no-proto": 2, //不允许使用__proto__属性
        "no-redeclare": 2, //不允许变量重复声明
        "no-return-assign": 2, //不允许在return语句中使用分配语句
        "no-script-url": 2, //不允许使用javascript:void(0)
        "no-self-compare": 2, //不允许自己和自己比较
        "no-sequences": 2, //不允许使用逗号表达式
        "no-throw-literal": 2, //不允许抛出字面量错误 throw "error"
        "no-unused-expressions": 2, //不允许无用的表达式
        "no-void": 2, //不允许void操作符
        "no-with": 2, //不允许使用with语句
        radix: 1, //使用parseInt时强制使用基数来指定是十进制还是其他进制
        "vars-on-top": 1, //var必须放在作用域顶部
        "wrap-iife": [2, "any"], //立即执行表达式的括号风格
        yoda: [
            2,
            "never",
            {
                exceptRange: true,
            },
        ], //不允许在if条件中使用yoda条件
        strict: [2, "function"], //使用严格模式
        "no-catch-shadow": 2, //不允许try catch语句接受的err变量与外部变量重名"no-delete-var": 2, //不允许使用delete操作符
        "no-label-var": 2, //不允许标签和变量同名
        "no-shadow": 2, //外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
        "no-shadow-restricted-names": 2, //js关键字和保留字不能作为函数名或者变量名
        "no-undef": 2, //不允许未声明的变量
        "no-undef-init": 2, //不允许初始化变量时给变量赋值undefined
        "no-undefined": 2, //不允许把undefined当做标识符使用
        "no-unused-vars": [
            2,
            {
                vars: "all",
                args: "after-used",
            },
        ], //不允许有声明后未使用的变量或者参数
        "no-use-before-define": [2, "nofunc"], //不允许在未定义之前就使用变量"indent": 2, //强制一致的缩进风格
        "brace-style": [
            2,
            "1tbs",
            {
                allowSingleLine: false,
            },
        ], //大括号风格
        camelcase: [
            2,
            {
                properties: "never",
            },
        ], //强制驼峰命名规则
        "comma-style": [2, "last"], //逗号风格
        "consistent-this": [0, "self"], //当获取当前环境的this是用一样的风格
        "key-spacing": [
            2,
            {
                beforeColon: false,
                afterColon: true,
            },
        ], //对象字面量中冒号的前后空格
        "max-nested-callbacks": [
            2,
            {
                max: 5,
            },
        ], //回调嵌套深度
        "new-cap": [
            2,
            {
                newIsCap: true,
                capIsNew: false,
            },
        ], //构造函数名字首字母要大写
        "new-parens": 2, //new时构造函数必须有小括号
        "no-lonely-if": 0, //不允许else语句内只有if语句
        "no-multiple-empty-lines": [
            2,
            {
                max: 2,
            },
        ], //空行最多不能超过两行
        "no-nested-ternary": 2, //不允许使用嵌套的三目运算符
        "no-new-object": 2, //禁止使用new Object()
        "no-trailing-spaces": 1, //一行最后不允许有空格
        "no-extra-parens": 1, //不允许出现多余的括号
        semi: [1, "always"], //强制语句分号结尾
        "semi-spacing": [
            2,
            {
                before: false,
                after: true,
            },
        ], //分后前后空格
        "space-before-blocks": [2, "always"], //块前的空格
        "space-before-function-paren": [
            2,
            {
                anonymous: "always",
                named: "always",
            },
        ], //函数定义时括号前的空格
        "space-infix-ops": [
            2,
            {
                int32Hint: true,
            },
        ], //操作符周围的空格
        "keyword-spacing": 2, //关键字前后的空格
        "space-unary-ops": [
            2,
            {
                words: true,
                nonwords: false,
            },
        ], //一元运算符前后使用一致的空格
        "wrap-regex": 2, //正则表达式字面量用括号括起来
        "no-var": 2, //使用let和const代替var
        "generator-star-spacing": [2, "both"], //生成器函数前后空格
        "max-depth": [
            2,
            {
                max: 4,
            },
        ], //嵌套块深度
        "no-console": "off",
        // "max-len": [1,{"code": 200,"comments": 100, "ignoreUrls": true}], //一行最大长度,单位为字符
        "prettier/prettier": 0,
    },

上面是某个eslint中rules的配置

别急,看到这个文件吗
在这里插入图片描述

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

把这段代码粘上
然后把缩进改为4
在这里插入图片描述
大结局
在这里插入图片描述
这样你保存的页面就是比较顺眼的格式,同时其他的符合eslint写法的页面也不会报错。

自定义标签,引入模块的使用标签报错
在rules中添加一行规则,让eslint忽视

"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]

作者sb,只会拷贝别人的,我这样试过了根本就不行

还有一招
在这里插入图片描述
这个文件会让你配置的eslint忽视一些文件夹和文件

src/assets
src/icons
public
dist
node_modules

要不试试把你爆红的文件目录写在里面试试?这样相当于没有使用eslint格式,直接用的prettier的格式化代码。

不行还是不行
那么请关闭vscode或者重启电脑试试[0.0]

error 2222 error 222
注意,不要随便修改你公司的这些配置,自己写个demo或一个人写的时候,这样使用。否则,你可能会让同事获取你代码后跑不起来 。

这是在用户定义里面设置的,所有的项目都会引用这个配置

如果说要改变单个项目的配置,
在用户设置旁边
在这里插入图片描述
点一下他,文件夹里面会出现一个.vscode的隐藏文件。这里面也有setting.json
把和其他同事相同的配置输入进入,那么这个文件夹下,就会有单独的配置。这样也就能够每个项目都使用不同的规范了。
比如说

 "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

那么保存的时候就是用的eslint的结构保存的

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 这是一个使用 Vue.js 实现 tab 切换的简单代码示例: ``` <template> <div> <ul class="tab-header"> <li v-for="(tab, index) in tabs" :key="index" :class="{ active: currentTab === index }" @click="currentTab = index"> {{ tab.title }} </li> </ul> <div class="tab-content"> <slot :tab="tabs[currentTab]"></slot> </div> </div> </template> <script> export default { data() { return { currentTab: 0, tabs: [ { title: 'Tab 1', content: 'Tab 1 content' }, { title: 'Tab 2', content: 'Tab 2 content' }, { title: 'Tab 3', content: 'Tab 3 content' }, ], }; }, }; </script> <style> .tab-header { display: flex; list-style: none; margin: 0; padding: 0; } .tab-header li { padding: 10px; cursor: pointer; } .tab-header li.active { background-color: #ddd; } </style> ``` 在父组件中使用该组件: ``` <template> <tab-component> <template v-slot:default="{ tab }"> {{ tab.content }} </template> </tab-component> </template> <script> import TabComponent from './TabComponent.vue'; export default { components: { TabComponent, }, }; </script> ``` 该代码实现了一个通过单击标签切换内容的简单 tab 组件。 ### 回答2: 用Vue一个tab切换可以使用Vue的组件和指令来实现。 首先,需要创建一个父组件,里面包含多个子组件和一个数据来记录当前选中的tab。可以使用v-for指令和数组来生成多个子组件,并使用v-bind指令来绑定当前选中的tab。 ```html <template> <div> <div class="tabs"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{ active: activeTab === index }">{{ tab }}</div> </div> <div class="content"> <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">{{ tab }}</div> </div> </div> </template> <script> export default { data() { return { activeTab: 0, tabs: ['Tab 1', 'Tab 2', 'Tab 3'] }; }, methods: { selectTab(index) { this.activeTab = index; } } }; </script> ``` 父组件中有一个`activeTab`数据用来记录当前选中的tab,一个`tabs`数组用来存储所有的tab名称。 `<div class="tabs">`中使用`v-for`指令生成多个tab,同时使用`v-bind`绑定点击事件和样式,并通过`activeTab`判断是否选中当前tab。 `<div class="content">`中也使用`v-for`指令生成多个tab内容,使用`v-show`指令根据`activeTab`来显示当前选中的tab内容。 最后,在父组件中的`selectTab`方法中,通过点击事件来改变`activeTab`的值,从而实现tab切换的功能。 这样就实现了一个简单的tab切换功能。 ### 回答3: Vue是一种流行的JavaScript框架,可以用来构建交互式的Web界面。如果要使用Vue来编一个Tab切换,可以按照以下步骤进行: 1. 首先,在Vue项目中安装并导入Vue库,可以使用命令"npm install vue"进行安装,并在JavaScript文件中导入Vue。 2. 在HTML文件中创建一个包含Tab切换的容器,可以使用div元素,并为其设置一个唯一的id属性。 3. 在JavaScript文件中,创建一个Vue实例,并将其关联到容器中。可以使用"new Vue()"语法来创建Vue实例,并使用el选项指定容器的id。 4. 在Vue实例的data选项中,定义一个变量来跟踪当前活动的Tab索引。可以设置默认值为0,表示初始状态下第一个Tab处于活动状态。 5. 在模板中,使用v-for指令遍历一个包含所有Tab标题的数组,并将每个标题显示为可点击的标签。可以在点击标签时,调用一个方法来更新当前活动的Tab索引。 6. 在模板中,使用v-show指令将只有当前活动Tab的内容显示出来,其他Tab的内容隐藏起来。可以使用当前活动的Tab索引来判断哪个Tab应该显示。 7. 最后,在CSS文件中定义样式来控制Tab标题和内容的外观,可以根据需要进行调整。 通过以上步骤,就可以使用Vue完成一个简单的Tab切换功能。可以随意添加更多的Tab,并根据实际需要进行样式和功能的定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值