vscode格式化配置

摘要:
1.安装Beautify、Eslint和Vetur2.设置。jsn配置文件-首选项-设置-在setting.jsn中编辑。打开设置。jsn文件并复制以下配置{//选项卡大小为2个空格“editor.tabSize”:2,//100列后的新行“editor.wordWrapColumn”:100,//保存时格式为“editor.pormatOnSave”:true,

1.安装

Beautify、Eslint、Vetur

2.setting.josn配置

文件-首选项-设置-在setting.josn中编辑,打开这个setting.josn文件后将下面配置复制即可

{
    //tab 大小为2个空格
    "editor.tabSize": 2,
    //100 列后换行
    "editor.wordWrapColumn": 100,
    //保存时格式化
    "editor.formatOnSave": true,
    //开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    //prettier 设置语句末尾不加分号
    "prettier.semi": false,
    //prettier 设置强制单引号
    "prettier.singleQuote": true,
    //选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    //显示 markdown 中英文切换时产生的特殊字符
    "editor.renderControlCharacters": true,
    //设置 eslint 保存时自动修复
    "eslint.autoFixOnSave": true,
    //eslint 检测文件类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true},
        {
            "language": "vue",
            "autoFix": true}
    ],
    //vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true,
            "semi": false}
    },
    //修改500ms后自动保存
    "editor.formatOnSaveTimeout": 500,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 500,
    "editor.codeActionsOnSaveTimeout": 500,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"}
}

3、配置.editorconfig文件

# https://editorconfig.org
root = true                         # 根目录的配置文件,编辑器会由当前目录向上查找,如果找到 `roor = true` 的文件,则不再查找

[*]                                 # 匹配所有的文件
indent_style =space                # 空格缩进
indent_size = 4# 缩进空格为4个
end_of_line =lf                    # 文件换行符是 linux 的 `
`
charset = utf-8                     # 文件编码是 utf-8trim_trailing_whitespace = true# 不保留行末的空格
insert_final_newline = true# 文件末尾添加一个空行
curly_bracket_next_line = false# 大括号不另起一行
spaces_around_operators = true# 运算符两遍都有空格
indent_brace_style =1tbs           # 条件语句格式是 1tbs

[*.js]                              # 对所有的 js 文件生效
quote_type =single                 # 字符串使用单引号

[*.{html,less,css,json}]            # 对所有 html, less, css, json 文件生效
quote_type = double# 字符串使用双引号

[package.json]                      # 对 package.json 生效
indent_size = 2                     # 使用2个空格缩进

4,(如果已经起了作用直接看第五步)如果你安装之后不起作用,那么,文件->设置->首选项,在右边搜索formatter把ESlint勾选上,然后保存

vscode格式化配置第1张

5,之后使用保存即可看到缩进(保持在一个空格),以及换行的时候会自动清空没有代码的行,缩进长度可以在.editorconfig文件中配置(我配置的2,文件里默认4),文件里面的各种配置后面都有中文解释,可以自行修改。

免责声明:文章转载自《vscode格式化配置》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇用navicate 连接本地数据库提示用户名/口令无效vw和rem的根字号大小设置CSS代码下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

解决vscode无法提示golang的问题

https://github.com/Microsoft/vscode-go/wiki/Go-with-VS-Code-FAQ-and-Troubleshooting Q: Auto-completions stopped working. What do I do? Run gocode close in a terminal and try agai...

mac下vscode插件位置

一、所在位置:Mac下vscode插件存放位置:User/(你的用户名)/.vscode/extensions 二、查找步骤:以我的mac为例, 打开finder,点击远程光盘 点击前往上层文件夹,点击macintosh-HD 点击用户(或User) 点击mymac(你的用户名) 点击.vscode(.vscode是隐藏文件,如果默认没显示,按住ct...

vscode clang-format插件的使用

对于代码的格式,不同的人有不同的风格,在clang-format插件的基础上,可以自定义自己的代码风格。 clang-format.exe位置(~/.vscode/extensions/ms-vscode.cpptools-0.26.1/LLVM/bin/clang-format.exe) vscode下使用clang-format: 1.将.clang-...

vscode中使用markdown

title: vscode中使用markdown date: 2017-08-01 02:58:53 tags: [Markdown,vscode] 转载自http://www.cnblogs.com/rengised/p/6985031.html vscode 是微软推出一款轻量级的文本编辑工具,类似于sublime,由于其拥有丰富的插件,安装使用...

VSCode插件开发全攻略(二)HelloWord

更多文章请戳VSCode插件开发全攻略系列目录导航。 写着前面 学习一门新的语言或者生态首先肯定是从HelloWord开始。 您可以直接克隆我放在GitHub上vscode-plugin-demo 的代码到本地,然后尝试修改代码并运行,也可以使用微软官方的脚手架vscode-generator-code来生成项目结构,脚手架的使用我们后面再来介绍,先来熟悉...

VSCode插件开发全攻略(九)常用API总结

更多文章请戳VSCode插件开发全攻略系列目录导航。 本文提炼一些常见的API使用场景供参考,本文内容有待完善。 编辑器相关 修改当前激活编辑器内容 替换当前编辑器全部内容: vscode.window.activeTextEditor.edit(editBuilder => { // 从开始到结束,全量替换 const end =...