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

 更新时间:2022年10月25日 08:51:28   作者:高素质车间工人  
这篇文章主要介绍了关于.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的配置 */
    "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。

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue环境变量配置之process.env解读

    vue环境变量配置之process.env解读

    这篇文章主要介绍了vue环境变量配置之process.env解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    本篇文章主要介绍了vue2.0中vue-cli实现全选、单选计算总价格的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vuex获取state对象中值的所有方法小结(module中的state)

    vuex获取state对象中值的所有方法小结(module中的state)

    这篇文章主要介绍了vuex获取state对象中值的所有方法小结(module中的state),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 基于Vue+Echart绘制动态图

    基于Vue+Echart绘制动态图

    这篇文章主要给大家介绍了基于Vue+Echart的动态图绘制,用户需要展示他的数据库是有哪个数据库转化的,需要展示数据库的轨迹图,前导库的关系图,文中有详细的实现代码,需要的朋友可以参考下
    2023-10-10
  • Vue实现生成本地Json文件功能方式

    Vue实现生成本地Json文件功能方式

    这篇文章主要介绍了Vue实现生成本地Json文件功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue父子组件进行通信方式原来是这样的

    vue父子组件进行通信方式原来是这样的

    这篇文章主要为大家详细介绍了vue父子组件进行通信方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • Vue-router 中hash模式和history模式的区别

    Vue-router 中hash模式和history模式的区别

    这篇文章主要介绍了Vue-router 中hash模式和history模式的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 关于Vite项目打包后浏览器兼容性问题的解决方案

    关于Vite项目打包后浏览器兼容性问题的解决方案

    本文主要介绍了关于Vite项目打包后浏览器兼容性问题的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue CLI 3.x 自动部署项目至服务器的方法

    Vue CLI 3.x 自动部署项目至服务器的方法

    本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx。非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • vue中使用cookies和crypto-js实现记住密码和加密的方法

    vue中使用cookies和crypto-js实现记住密码和加密的方法

    这篇文章给大家介绍一下关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
    2018-10-10

最新评论