返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于.prettierrc代码格式化配置方式
  • 827
分享到

关于.prettierrc代码格式化配置方式

prettierrc配置代码格式化格式化代码prettierrc 2022-11-13 18:11:44 827人浏览 泡泡鱼
摘要

目录prettierrc的使用prettierrc规则配置一些问题代码的规范规则很多很繁琐,不可能每个都去手动修改,有时候一个页面能有上百个规范问题,那么这时候代码自动格式化就很有用

代码的规范规则很多很繁琐,不可能每个都去手动修改,有时候一个页面能有上百个规范问题,那么这时候代码自动格式化就很有用了,最有名的就是prettierrc了。

当然还有其他的比如Vue用的vetur、beautify格式化插件等。

格式化插件再配合eslint规范这样写出来的代码又好看效率又高,至于eslintrc的介绍可以点击=》eslintrc介绍及使用学习下,这样一个负责检查,一个负责改,完美!

prettierrc的使用

首先要做的就是在vscode安装prettierrc-代码格式化插件 

然后要代码保存并格式化就需要在vscode的setting.JSON里加上下面这句话,这样每按下ctrl+S是代码会根据你配置的prettierrc规则进行格式化

规则遵循优先级关系:

项目根目录下的.prettierrc > setting.json里设置的 prettier规则

// #值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F
  "editor.fORMatOnSave": true,

prettierrc规则配置

规则的配置可以写在setting.json里,也可以在项目的根目录下创建 .prettierrc文件定制项目专属的规则。

HTML/CSS/JS/LESS 文件的 prettier 格式化规则

{
    // 使能每一种语言默认格式化规则
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[CSS]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    
    "prettier.printWidth": 120, // 超过最大值换行
    "prettier.tabWidth": 2, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab,使用空格
    "prettier.semi": true, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid:省略括号
    "prettier.bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.disableLanguages": ["vue"], // 不格式化vue文件,vue文件的格式化单独设置
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器,默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
    "prettier.trailinGComma": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
    "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

一些问题

有时候你会发现你创建的项目并不会主动的去进行规范检查,就像我创建koa2的项目的时候配置了prettier也不会有检查,这就需要在项目里安装一些依赖了。

以我koa2项目为例,我是去git上看了大神的案例项目后,在他们项目的package.json里看到的那些依赖项,有以下7个:

   "eslint": "^7.2.0",
   "eslint-config-koa": "^2.0.2",
   "eslint-config-standard": "^14.1.1",
   "eslint-plugin-import": "^2.21.2",
   "eslint-plugin-node": "^11.1.0",
   "eslint-plugin-promise": "^4.2.1",
   "eslint-plugin-standard": "^4.0.1",

这个eslint的版本有点高,有时候会因为eslint版本太高项目报错,具体什么错我忘了,我一般使用的是5.8.0版本。

vue项目用的应该是eslint-config-vue;React项目用的应该是eslint-config-react。

这样项目的规范问题应该就解决。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 关于.prettierrc代码格式化配置方式

本文链接: https://lsjlt.com/news/170057.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于.prettierrc代码格式化配置方式
    目录prettierrc的使用prettierrc规则配置一些问题代码的规范规则很多很繁琐,不可能每个都去手动修改,有时候一个页面能有上百个规范问题,那么这时候代码自动格式化就很有用...
    99+
    2022-11-13
    prettierrc配置 代码格式化 格式化代码prettierrc
  • 关于mybatisPlus yml配置方式
    目录mybatisPlus yml配置mybatisPlus3.X yml配置mybatisPlus yml配置 spring: datasource: driver...
    99+
    2024-04-02
  • VSCode 配置 python 代码格式化工具(yapf,autopep8)
    1.安装yapf pip install yapf 2.VSCode setting.josn配置 "python.formatting.provider": "yapf", //使用yapf作...
    99+
    2023-09-02
    python vscode 开发语言
  • Flex Builder 3代码格式化方
    Flex Builder的最新版本已经到了4.5,可是代码格式化工具并没有集成在安装版本中,需要通过其他途径来实现。 下面提供一个安装插件的方法实现Flex代码格式化:      1. 点击菜单中的 Help-> Software ...
    99+
    2023-01-31
    代码 Flex Builder
  • vscode怎么配置eslint+prettier来格式化Vue代码
    这篇文章给大家分享的是有关vscode怎么配置eslint+prettier来格式化Vue代码的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。项目背景 : vue-cli 先安装好这三个插件,然后根据配置清单按需配...
    99+
    2023-06-15
  • Nginx配置-日志格式配置方式
    目录一、默认的日志格式二、我使用的日志格式三、参数四、测试效果总结上线了一个小的预约程序,配置通过Nginx进行访问入口,默认的日志是没有请求时间的,因此需要配置一下,将每一次的请求...
    99+
    2023-03-19
    Nginx配置 Nginx日志格式配置 Nginx日志格式
  • 关于vite.config.ts文件的配置方式
    目录vite.config.ts文件的配置1、alias配置别名2、关于path的引入vite项目在jenkins自动打包报错2种解决方案vite.config.ts文件的配置 im...
    99+
    2024-04-02
  • Dreamweaver代码的格式化功能掌控html代码的格式
    今天偶然发现了Dreamweaver的一个非常有用的功能,就是代码的格式化功能。一般情况下,我们写的html或者css代码都计较混乱,难以阅读,即使刚开始很在意代码的可读性,但是等到所使用的标签越来越多,嵌套越来越深,这...
    99+
    2022-06-12
    格式化 html代码 格式
  • vuejs格式化数字为金额格式代码
    目录格式化数字为金额格式格式化金额组件格式化数字为金额格式 export const formatMoney = (number, decimals = 0, decPoint =...
    99+
    2024-04-02
  • idea如何格式化代码
    本文小编为大家详细介绍“idea如何格式化代码”,内容详细,步骤清晰,细节处理妥当,希望这篇“idea如何格式化代码”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。idea格式化代码的方法:1、直接使用快捷键“Ct...
    99+
    2023-07-05
  • pycharm如何格式化代码
    pycharm格式化代码的方法:1、手动格式化,使用快捷键“Ctrl+Alt+L”来格式化当前文件中的代码;2、自定义代码风格规则,进入“Settings”选项,选择“Editor”,最后选“Code Style”;3、使用Python C...
    99+
    2023-12-09
    pycharm
  • 关于properties配置文件的加密方式
    目录需要4个步骤编写加密解密工具类获取用户名和密码的秘文编写PropertyPlaceholderConfigurer的子类配置Bean要完成properties属性文件某些属性值的...
    99+
    2022-11-13
    properties配置文件 配置文件加密 properties配置文件加密
  • js如何格式化JSON代码
    这篇文章将为大家详细讲解有关js如何格式化JSON代码,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。格式化 JSON 代码相信大家都使用过JSON.stringify方法,该方法可以将一个 Ja...
    99+
    2023-06-17
  • JavaScript如何格式化JSON代码
    这篇文章主要为大家展示了“JavaScript如何格式化JSON代码”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何格式化JSON代码”这篇文章吧。格式化JSON代码我们都...
    99+
    2023-06-27
  • Eclipse代码格式化设置的示例分析
    这篇文章给大家分享的是有关Eclipse代码格式化设置的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。自用项目中统一Eclipse格式化Java、JavaScript、JSP、HTML代码设置1.Wind...
    99+
    2023-05-30
    eclipse
  • CSS代码格式化的不同表现方式是什么
    这篇文章主要介绍了CSS代码格式化的不同表现方式是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   格式化与CSS的功能无关。这些仅...
    99+
    2024-04-02
  • 基于Eclipse的Flex代码格式化插件怎么用
    小编给大家分享一下基于Eclipse的Flex代码格式化插件怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Flex代码格式化工具在对Flex进行编码的时候,...
    99+
    2023-06-17
  • vue模板配置与webstorm代码格式规范设置
    目录1、编译器代码格式规范设置2、vue模板配置1、编译器代码格式规范设置 通常我们写代码时,代码缩进都是4个空格,但是在前端中,据全球投票统计,建议使用2个空格来进行代码缩进。 首...
    99+
    2024-04-02
  • springboot 返回json格式数据时间格式配置方式
    目录返回json格式数据时间格式配置返回json日期格式问题返回json格式数据时间格式配置 数据库里面查出来的时间是时间错格式,前段需要处理才能展示相应的格式,自己一个个转的话太麻...
    99+
    2024-04-02
  • VS Code中python代码自动格式化方法
    为了能够在VS Code中使自己写的Python代码更加符合规范并且适宜阅读,往往需要手工进行代码格式矫正,例如等号左右的空格、函数参数与等号之间的空格等。下面讲解一种简单的自动格式化方法。 首先安装...
    99+
    2023-09-22
    python 开发语言
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作