最近一直使用vscode,项目中也使用了eslint等代码格式化工具,但是自从更新之后标签属性一直换行,查询尝试了多种方法发现都已经不行,纠结好久才搞好,终于觉得编辑器清新了好多
1、需要 command+,;打开设置,搜索wrap 如下选择 代表永不换行
2、插件市场下载插件:Prettier - Code formatter;安装完成之后需要打开settings.json添加如下配置
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 120,
"wrap_attributes": "auto",
"end_with_newline": false
},
"prettier": {
"semi": false, //不使用分号结尾
"singleQuote": true, //使用单引号
"eslintIntegration": false //开启 eslint 支持
}
},
以上就是为了用prettier个格式化代码,至于格式化规则选择配置在项目根目录的 .prettierrc文件中这里可以配置视野区域的宽度,确保在此宽度不换行,类似tab空格,单双引号,分号结尾,是否开启eslint等等
.prettierrc 根目录文件
{
"tabWidth": 2,
"useTabs": false,
"printWidth": 3000, // 就是这行生效,其他配置主要是为了多人协作规范代码格式,后面开始eslint校验能完美搭配,数字自己调整可以看看效果
"semi": false,
"singleQuote": true,
"arrowParens": "avoid",
"bracketSpacing": true,
"endOfLine": "auto",
"eslintIntegration": false,
"htmlWhitespaceSensitivity": "ignore",
"ignorePath": ".gnore",
"trailingComma": "none"
}