vscode 一键规范代码格式的实现

使用vscode的过程中 自己或者push代码以后 代码的格式可能会出现错乱,
作为一个成熟的开发 , 当然应该遵守一些代码规范, 首先代码整洁度应该排在第一位
使用vscode 格式化代码 在少量的情况下 可能可以手动去修改格式, 但在大量格式排版不对齐的情况下, 应该怎么做?

文件 -> 首选项 -> 设置 -> {}

在右侧用户设置中可以对当前编辑器默认的进行更改

下面的复制到用户设置中, ctrl + s 即可完成对代码的规范

{
  // 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 // 两个选择器中是否换行
}

到此这篇关于vscode 一键规范代码格式的实现的文章就介绍到这了,更多相关vscode 规范代码格式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vscode配置vue下的es6规范自动格式化详解

    前言 最近在写Vue的时候,遇见了js es6格式化问题,因为我平时用vscode在写php,所以会安装一些格式化插件,也包括html-css-js的插件 导致的问题:由于vue语法规范问题,导致保存自动格式化成不被使用的代码格式,出现代码错误等异常 写这篇的时候,我也查阅了很多资料有很多的资料不能被使用,也换过很多的编辑器如:Atom,sublime,webstorm 否掉的编辑器 Atom 这一款编辑器真心颜值高,但是插件是真心不好弄,各种被墙,各种的不适应,所以我决定还是弃掉 sublim

  • vscode 一键规范代码格式的实现

    使用vscode的过程中 自己或者push代码以后 代码的格式可能会出现错乱, 作为一个成熟的开发 , 当然应该遵守一些代码规范, 首先代码整洁度应该排在第一位 使用vscode 格式化代码 在少量的情况下 可能可以手动去修改格式, 但在大量格式排版不对齐的情况下, 应该怎么做? 文件 -> 首选项 -> 设置 -> {} 在右侧用户设置中可以对当前编辑器默认的进行更改 下面的复制到用户设置中, ctrl + s 即可完成对代码的规范 { // vscode默认启用了根据文件类型自动设置

  • vue项目代码格式规范设置参考指南

    目录 前言 为项目添加eslint 自定义eslint配置 pre-commit设置 VS Code配置 参考 总结 前言 为了尽量统一项目成员的代码风格,降低开发者对代码的理解成本,所以我们需要为项目统一代码格式规范:同时我们不能为了降低理解成本,去增加开发成本,所以我们借助VS Code的相关插件去完成代码格式化的功能. 为项目添加eslint 使用vue-cli构建的项目,在项目构建时,就会让你选择格式化方案,如果是已有项目运行vue add eslint添加格式化方式,建议选择Prett

  • R语言学习代码格式一键美化

    R语言学习代码格式一键美化

    目录 RStudio 快捷操作 formatR 包 配合 Shiny 包使用 参考 当写R代码时,很多时候写的代码或者看到的代码缩进都很难统一到标准的格式.这时为了规范化代码,我们需要再代码中一行一行查代码,将其修改成标准的格式. 那么我们有没有一键代码整理的方式或者R包呢? 答案是有的! 下面我们介绍两种方法. RStudio 快捷操作 如果你使用的是RStudio 写代码的话,那么只用全选代码(Ctrl + A),而后输入如下命令: Ctrl + Shift + A 即可简单调整缩进与格式.

  • vue模板配置与webstorm代码格式规范设置

    vue模板配置与webstorm代码格式规范设置

    目录 1.编译器代码格式规范设置 2.vue模板配置 1.编译器代码格式规范设置 通常我们写代码时,代码缩进都是4个空格,但是在前端中,据全球投票统计,建议使用2个空格来进行代码缩进. 首先我们打开webstorm中的设置,如果使用的是mac的同学直接使用command +  ,快捷方式,来到Editor-->Code Style-->HTML,将Tab size和Indent的值改为2,同理在JavaScript中也改为2 2.vue模板配置 在我们使用html练习vue时,如果我们不想每次

  • Go语言开发编程规范命令风格代码格式

    前言 今天这篇文章是站在巨人的肩膀上,汇总了目前主流的开发规范,同时结合Go语言的特点,以及自己的项目经验总结出来的:爆肝分享两千字Go编程规范. 后续还会更新更多优雅的规范. 命名风格 1. [强制]代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反 例 : _name / __name / $name / name_ / name$ / name__ 2. [强制]代码中的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式. 说明:正确的英文拼写和语法可以

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力

  • pycharm使用技巧之自动调整代码格式总结

    代码自动填充了空格 问题 在使用pycharm的代码编辑器时,常常懒得写空格,如下图,但这是不符合代码规范的,而且也会影响可读性. 解决方法 pycharm有自动调整代码格式的快捷键,默认为Alt+Ctrl+L,按下快捷键后,代码自动填充了空格. 自动对齐代码 问题 在使用pycharm的代码编辑器时,有点时候copy的代码的没有按照代码格式对齐,如下图,但这是不符合代码规范的,而且也会影响可读性. 解决方法 pycharm有自动调整代码格式的快捷键,默认为Alt+Ctrl+L,将光标置于需要调

  • 利用types增强vscode中js代码提示功能详解

    利用types增强vscode中js代码提示功能详解

    使用 types 增强vscode中javascript代码提示功能 微软的vscode编辑器是开发typescript项目的不二首选,其本身也是采用typescript开发的. 使用过ts的同学都知道 *.d.ts 类型声明文件,其管理工具,从最初的 tsd,到后来的 typings,一直到现在的@types,类型声明文件为ts的智能提示,类型检查提供了有力支持. 我们也可以使用类型声明文件,增强vscode编辑javascript时的智能提示. 关于vscode这方面更深的说明,请访问以下链

  • PyCharm代码格式调整方法

    前言序锦 很多时候,当我们在使用编辑器的时候,遇到复制粘贴,修改别人代码等等的时候,都会遇到这个让人头疼的问题,那就是如何解决格式问题,今天就让华仔带你一起去解决这些困扰了你好久的问题吧!!!! PyCharm中调整代码格式 PyCharm中代码整体缩进,以及反向缩进 1.pycharm中调整代码格式 首先打开PyCharm,右上角文件点击,找到默认位置: 打开默认设置找到编辑器->编辑器: 找到code style -> python来设置代码的格式:python格式化代码,制表符和缩进,也

随机推荐