精华内容
下载资源
问答
  • vscode格式化代码插件配置
    万次阅读
    2019-12-25 14:09:15

    在vscode使用过程中,遇到了格式化代码后,很多代码报红的情况,怀疑是插件间起了冲突

    如果你安装了
    Elinst
    Vetur
    Prettier-Code formatter ,这三个插件
    只需要这份配置就可以通用处理这些插件间的问题:
    文件-首选项-设置-点击这里打开setting.json文件,复制下面代码进去即可
    在这里插入图片描述

    {
      // 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
        }
      },
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
      },
      "window.zoomLevel": 1,
      "workbench.colorTheme": "Nebula",
      "editor.suggestSelection": "first",
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue"
    }
    
    更多相关内容
  • { // vscode默认启用了根据文件类型自动设置tab...值设置为false时,代码格式化请按shift+alt+F “editor.formatOnSave”: false, // #每次保存的时候将代码按eslint格式进行修复 “eslint.autoFixOnSave”: true, //.

    在这里插入图片描述在这里插入图片描述

    {
      // vscode默认启用了根据文件类型自动设置tabsize的选项
      "editor.detectIndentation": false,
      // 重新设定tabsize
      "editor.tabSize": 2,
      // #每次保存的时候自动格式化
      "editor.formatOnSave": true,
      // #每次保存的时候将代码按eslint格式进行修复
      "eslint.autoFixOnSave": true,
      // 添加 vue 支持
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "vue",
          "autoFix": true
        }
      ],
      // #让prettier使用eslint的代码格式进行校验
      "prettier.eslintIntegration": true,
      // #去掉代码结尾的分号
      "prettier.semi": false,
      // #使用带引号替代双引号
      "prettier.singleQuote": true,
      // #让函数(名)和后面的括号之间加个空格
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      // #这个按用户自身习惯选择
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      // #让vue中的js按编辑器自带的ts格式进行格式化
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned"
          // #vue组件中html代码格式化样式
        }
      },
      // 格式化stylus, 需安装Manta’s Stylus Supremacy插件
      "stylusSupremacy.insertColons": false, // 是否插入冒号
      "stylusSupremacy.insertSemicolons": false, // 是否插入分好
      "stylusSupremacy.insertBraces": false, // 是否插入大括号
      "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
      "stylusSupremacy.insertNewLineAroundBlocks": false,
      "diffEditor.ignoreTrimWhitespace": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "explorer.confirmDelete": false // 两个选择器中是否换行
    }
    

    其他vscode插件:
    在这里插入图片描述

    展开全文
  • 主要介绍了vscode使用官方C/C++插件无法进行代码格式化问题,本文通过截图实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 【小知识】VScode格式化代码配置及插件

    万次阅读 多人点赞 2019-08-20 02:31:17
    VScode格式化代码配置及插件 学会使用扩展和配置,能让你的vs code生产效率提高百分之二十 ——鲁迅

    VScode格式化代码配置及插件

    学会使用扩展和配置,能让你的vs code生产效率提高百分之二十 ——鲁迅

    打开setting(新版vscode打开方式2019版)

    先按步骤打开 setting 界面,
    Code --> preferences -->setting (也可以快捷键 command + ,(mac) 直接打开)

    现在看到的是界面配置模式,点击右上角的红框的图标(如下图),可以打开 settings.json 文件
    在这里插入图片描述

    格式化的快捷键

    • Windows:Shift + Alt + F
    • Mac: Shift + Option + F
    • Ubuntu: Ctrl + Shift + I

    配置在手,天下我有

    如果你安装了Elinst Vetur Prettier ,只需要这份配置就可以通用处理这些插件间的问题:
    在这里插入图片描述
    通配: 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考,然后结合自己的需求去配置。如果没有特殊需求,也可以拿去直接用

    {
      // 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
        }
      }
    }
    

    浅说一下各个插件

    ESlint: javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好

    Prettier - Code formatter: 只关注格式化,并不具有eslint检查语法等能力,只关心格式化文件(最大长度、混合标签和空格、引用样式等),包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

    vetur: 可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件,像这样
    在这里插入图片描述
    Manta’s Stylus Supremacy: 格式化stylus的插件(不用就不装),因为vetur会把css格式化有分号 、大括号的那种,此插件会把css格式化成stylus风格,像这样
    在这里插入图片描述
    Beautify
    打开要格式化的文件 —> F1 —> Beautify file —> 选择你要格式化的代码类型
    在这里插入图片描述
    然后选择需要格式化的类型
    在这里插入图片描述

    汇总一下一些插件之间的小问题

    Vetur 对模版HTML代码没有格式化缩进
    vscode 对 vue 的支持也是很棒的。对于 vue 的格式化,我们用到了 Vetur 插件,Vetur 插件的格式化大多也是直接用的 prettier 规范,但我们会发现Vetur 对模版HTML代码没有格式化缩进,可以配置下面这个:
    注意安装这个插件后,可以在设置中看到如下的内容:
    在这里插入图片描述
    然后在后面在配置一下这个就可以让HTML可以格式化缩进啦:

    "vetur.format.defaultFormatter.html": "prettier"
    

    vetur + Manta’s Stylus Supremacy
    解决安装了vetur,又想安装Manta’s Stylus Supremacy时去掉vetur添加的分号大括号时可以这样配置:

     // 格式化stylus, 需安装Manta's Stylus Supremacy插件
        "stylusSupremacy.insertColons": false, // 是否插入冒号
        "stylusSupremacy.insertSemicolons": false, // 是否插入分好
        "stylusSupremacy.insertBraces": false, // 是否插入大括号
        "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
        "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
    

    vetur 格式化的标准js文件不符合ESlint规范
    vetur 格式化的标准js文件不符合ESlint规范,会给你加上双引号、分号等
    解决 vetur、prettier 格式化的标准js文件不符合ESlint规范的配置:

    {
         // vscode默认启用了根据文件类型自动设置tabsize的选项
        "editor.detectIndentation": false,
        // 重新设定tabsize
        "editor.tabSize": 2,
        // #每次保存的时候自动格式化 
        "editor.formatOnSave": true,
        // #每次保存的时候将代码按eslint格式进行修复
        "eslint.autoFixOnSave": true,
        // 添加 vue 支持
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            {
                "language": "vue",
                "autoFix": true
            }
        ],
        //  #让prettier使用eslint的代码格式进行校验 
        "prettier.eslintIntegration": true,
        //  #去掉代码结尾的分号 
        "prettier.semi": false,
        //  #使用带引号替代双引号 
        "prettier.singleQuote": true,
        //  #让函数(名)和后面的括号之间加个空格
        "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
        // #这个按用户自身习惯选择 
        "vetur.format.defaultFormatter.html": "js-beautify-html",
        // #让vue中的js按编辑器自带的ts格式进行格式化 
        "vetur.format.defaultFormatter.js": "vscode-typescript",
        "vetur.format.defaultFormatterOptions": {
            "js-beautify-html": {
                "wrap_attributes": "force-aligned"
                // #vue组件中html代码格式化样式
            }
    	}
    } 
    

    vue 文件和 html 文件,没有 eslint 风格提示
    vue 文件和 html 文件,没有 eslint 风格提示,如图:
    在这里插入图片描述
    解决方法:
    在 setting.json 文件中加入如下配置:

        // eslint 检测文件类型
          "eslint.validate": [
            "javascript",
            "javascriptreact",
            {
              "language": "html",
              "autoFix": true
            },
            {
              "language": "vue"
              "autoFix": true
            }
          ]
    

    在这里插入图片描述
    function () (eslint 推荐)和 function() (prettier 推荐) 的风格冲突问题

    该问题摘抄至文章:https://blog.csdn.net/userkang/article/details/84305689

    如果推崇 eslint 的规范,也就是 function () 这种的。那么恭喜你,你什么都不用改。

    如果你和我一样推崇 prettier 的规范,也就是 function() 这种的。那么就需要改改了。

    先把 setting.json 中 eslint.validate 字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候,走
    prettier 的规范,而不再需要根据 eslint 的规范,进行 fix。

    这样做有个好处是,如果你的项目不需要配置 eslint 来检查代码 ,代码就不需要格式化为 eslint 的规范。

     {
        "language": "vue"
        // "autoFix": true
     }
    

    但是如果你的项目配置了 eslint ,比如用 vue-cli 构建的项目,一般都会进行 eslint 检查。那么就在项目根目录的 eslintrc.js 中添加下面的配置,这种情况就可以把 autoFix 的注释打开了。因为可以自动修复成 eslint 的规范。

    // 自定义的规则
    module.exports = {
      rules: {
        'space-before-function-paren': 0
      }
    }
    

    vue中使用Eslint对element-UI自动格式化支持不好

    这个配置相应出现的问题可以参考这篇文章: https://blog.csdn.net/qq_34803821/article/details/84972781

    参考文章

    https://blog.csdn.net/userkang/article/details/84305689
    https://blog.csdn.net/latency_cheng/article/details/80409202
    https://blog.csdn.net/qq_34803821/article/details/84972781

    展开全文
  • VScode格式化代码配置及插件

    千次阅读 2020-09-07 18:21:34
    格式化的快捷键 Windows:Shift + Alt + F Mac: Shift + Option + F Ubuntu: Ctrl + Shift + I 安装了Elinst Vetur Prettier ,只需要这份配置就可以通用处理这些插件间的问题: 通配: 此配置支持 CSS、HTML、JS ...

    打开setting(新版vscode打开方式2019版)
    Code --> preferences -->setting (也可以快捷键 command + ,(mac) 直接打开)

    现在看到的是界面配置模式,点击右上角的红框的图标(如下图),可以打开 settings.json 文件

    在这里插入图片描述

    格式化的快捷键
    Windows:Shift + Alt + F
    Mac: Shift + Option + F
    Ubuntu: Ctrl + Shift + I

    安装了Elinst Vetur Prettier ,只需要这份配置就可以通用处理这些插件间的问题:
    在这里插入图片描述
    通配: 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考,然后结合自己的需求去配置。如果没有特殊需求,也可以拿去直接用

    {
      // vscode默认启用了根据文件类型自动设置tabsize的选项
       "editor.detectIndentation": false,
      // tab 大小为2个空格
      "editor.tabSize": 2,
      // 100 列后换行
      "editor.wordWrapColumn": 100,
      // 保存时格式化
      "editor.formatOnSave": true,
      // 开启 vscode 文件路径导航
      "breadcrumbs.enabled": true,
      // prettier 设置语句末尾不加分号
      "prettier.semi": false,
      // prettier 设置强制单引号
      "prettier.singleQuote": true,
      //  #让函数(名)和后面的括号之间加个空格
        "javascript.format.insertSpaceBeforeFunctionParenthesis": 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
        }
      }
    }
    
    展开全文
  • Vscode 一键格式化代码插件

    千次阅读 2020-12-09 17:26:11
    1.在Vscode应用商店安装下面这个插件。 2.然后点击鼠标右键,点击格式化文档就可以将代码格式化。这样代码就可以格式化了。
  • VSCode格式化代码插件(Beautify 插件配置)使用笔记 1、在项目根目录下新建 .jsbeautifyrc 文件 在vscode编辑器中设置格式化程序: "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "...
  • vue vscode代码格式化插件配置

    千次阅读 2021-12-14 18:43:04
    扩展商店搜索Vetur 选择扩展此设置 加入 "vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 300, // No line exceeds 300 characters "singleQuote": false // Prefer ...格式化之前
  • vscode 格式化代码

    2022-03-29 11:33:01
    格式化代码
  • vscode插件-格式化代码-工具

    千次阅读 2022-05-01 00:12:39
    代码格式 shift alt f 格式 得到 名称 描述 vetur vue文件高亮 vue文件的格式化 prettier .pretierrc 文件
  • vscode格式化代码插件Beautify

    千次阅读 2019-01-27 23:45:00
    vscode格式化代码安装 VsCode 格式化代码插件搜索并安装 Beautify 格式化代码插件使用:打开要格式化的文件 —> F1 —> Beautify file —> 选择你要格式化的代码类型 格式化对齐快捷键:Windows: Ctrl + ...
  • 3)安装 VsCode 格式化代码插件 搜索并安装 Beautify 格式化代码插件 使用指南: 打开要格式化的文件—>F1VSCode 如何格式化或美化js/css代码,本经验介绍在VSCode查看代码时,如何美化不换行的代码,以及如何格式...
  • vscode-lua格式 VS Code插件。 特征 重新格式化您的Lua源代码。 扩展设置 vscode-lua-format.configPath :指定样式配置文件。 vscode-lua-format.binaryPath :指定备用lua格式的二进制路径
  • vscode 配置vue+vetur+eslint+prettier自动格式化功能 问题描述 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然...
  • vscode 格式化插件以及配置

    千次阅读 2021-11-26 15:09:31
    vscode 格式化插件以及配置: vscode常用插件: Beautify Eslint Vetur 进入setting页面点击如图红框进入,把下面的js代码粘贴进入就好了。 点击左下角的这只进入设置 搜索 setting.js 然后粘贴即可 { // 是否...
  • VScode格式化代码插件beautify

    万次阅读 2017-07-27 15:54:59
    vscode编辑器格式化react代码插件beautify和react-beautify插件bea命令按下F1,然后输入bea由于我们要格式化JSX代码,所以我们选择第二个选项,然后我们就会发现代码被格式化了。
  • vs code格式化代码的快捷键如下:(来源于这里) On Windows Shift+Alt+F On Mac Shift+Option+F On UbuntuVS Code 的常用快捷键和插件 一、vs code 的常用快捷键 1、注释: a)单行4、Beautiful 格式化代码的工具VS ...
  • 效果图 推荐插件 beautify ... 搜索安装插件“beautify” ... 使用快捷键“shift+alt+F”即可自动格式化代码 ...VScode修改格式化代码的快捷键 推荐 无广告的百度绿色版 baidu.rudon.cn ...
  • EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格 vscode代码提交格式检测配置
  • VSCode 代码格式化 快捷键 - Ryan_zheng - 博客园 在ubuntu下用vscode格式化C++代码需要注意,除了在vscode内部搜索安装 Clang-Format插件 外,还需要在终端输入命令 sudo apt-get install clang-format 安装clang-...
  • Vscode格式化 代码

    万次阅读 2019-07-04 18:06:22
    Vscode 编译器有很多格式化插件,比如Vetur和Eslint。但是Vetur和Eslint倾向于格式化前端代码 格式化c语言代码,不需要插件,使用自带的clang-format就可以 在File->Preferance->setting中,使用Clang_...
  • 最新VSCode格式化代码不换行 安装Vetur插件 设置 打开设置 搜索 打开 配置 settings.json 文件 vetur.format.defaultFormatterOptions 输入下面内容 { "workbench.iconTheme": "material-icon-theme", ...
  • 错误:The 'clang-format' command is not available. Please check your clang-format. 解决方法:按下组合键ctrl+shift+p 在弹出的搜索窗口中输入format 选择format code...选项后点击c/c++
  • vscode 格式化插件

    2021-05-04 03:35:23
    贴一下我在写 vue 时候的 vscode 的配置过程,ESlint 是建议的1. 需插件安装Vetur : 语法高亮等功能ESlint : 代码风格检测... 插件设置vue 的模板格式化:"vetur.format.defaultFormatter.html":"js-beautify-h...
  • VSCode格式化插件冲突

    2021-07-28 19:49:42
    VSCode格式化插件冲突VSCode格式化插件冲突--eslint和vetur两个插件的作用Vetur的作用ESLint的作用遇到的问题风格冲突,插件失效解决方法建议 VSCode格式化插件冲突–eslint和vetur 两个插件的作用 Vetur的作用 ...
  • Vscode代码格式化

    千次阅读 2021-06-14 00:51:02
    Vscode代码格式化Vscode代码格式化①首选项 → ② 设置③ 点击 这个小图标④ 然后把以下的代码复制进去。{"window.zoomLevel": 2, //设置窗口缩放级别"files.autoSave": "afterDelay", //自动保存代码"breadcrumbs....
  • 一个插件搞定VScode代码格式化

    千次阅读 热门讨论 2020-11-29 10:41:31
    小伙伴本是否被代码格式化搞得身心俱疲,其实代码格式化很简单的。但是我先说说为什么代码格式化很重要。 公司里要求代码格式化,我们从现在就要养成这个好习惯(不然项目经理会生气的!!!) 很多时候,敲代码并...
  • python的代码错误检查通常用pep8、pylint和flake8,自动格式化代码通常用autopep8、yapf、black。这些工具均可以利用pip进行安装,这里介绍传统的利用pip.exe安装和在VScode中安装两种方式。【温馨提醒:我用的是...
  • 1. 打开vscode配置的...2. 代码注释插件配置 打开Extensions侧边栏,搜索koroFileHeader插件并安装 打开vscode配置,在配置文件中添加以下内容,字段可根据自己的需要增加删除;如果出错,请删除注释: "fileheader.c

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,832
精华内容 4,732
关键字:

vscode格式化代码插件.