ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue3实践指南:Prettier代码格式化工具

2021-11-03 23:01:54  阅读:230  来源: 互联网

标签:插件 格式化 空格 Prettier Vue3 工具 true


一、Prettier代码格式化工具

  Prettier 是一个代码格式化工具,它可以支持 js/jsx/ts/flow/json/css/less/scss 等文件格式。

1、为什么要使用 Prettier?

  用来替代 lint 中的一些场景,比如说分号/tab缩进/空格/引号,这些在lint工具检查出问题之后还需要手动修改,而通常这样的错误都是空格或者符号之类的,这样相对来说不太优雅,利用格式化工具自动生成省时省力。

2、VSCode 配置 Prettier

(1)安装 Prettier - Code formatter 插件

(2)在项目的根目录配置 .prettierrc

{
  "printWidth": 100, //每行到多少长度开始折行
  "tabWidth": 2,
  "singleQuote": true, //单引号
  "trailingComma": "none", //数组、对象最后一个元素的尾逗号
  "bracketSpacing": true, //花括号前后空格
  "jsxBracketSameLine": true, //使多行JSX元素最后一行末尾的 > 单独一行
  "parser": "babel", //指定使用哪一种解析器
  "semi": true, //是否在行尾加分号
  "useTabs": true, //使用tab(制表符)缩进而非空格
  "arrowParens": "avoid", //只有一个参数的箭头函数的参数是否带圆括号(默认avoid不带)
  "jsxSingleQuote": true, //在JSX中使用单引号
  "htmlWhitespaceSensitivity": "ignore", //为 HTML 文件定义全局空格敏感度
  "quoteProps": "as-needed" //自定义引号配置
}

  放到项目中时注释要去掉。这样 Prettier 已经安装、配置完成了,以后用 Shift+Alt+F 格式化代码的时候就会按照 Prettier 的配置项进行格式化。

  VSCode 中,Prettier 插件使用配置文件的优先级:.prettierrc > .editorconfig > Prettier插件默认设置。

标签:插件,格式化,空格,Prettier,Vue3,工具,true
来源: https://www.cnblogs.com/goloving/p/15505297.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有