前端配置prettier工具格式化代码

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

1.安装prettier

npm install prettier -D

2.新建.prettierrc文件：

useTabs：使用tab缩进还是空格缩进，选择false；
tabWidth：tab是空格的情况下，是几个空格，选择2个；
printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
singleQuote：使用单引号还是双引号，选择true，使用单引号；
trailingComma：在多行输入的尾逗号是否添加，设置为 none；
semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{"useTabs": false,"tabWidth": 2,"printWidth": 80,"singleQuote": true,"trailingComma": "none","semi": false
}

3.创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*

4.VSCode需要安装prettier的插件

5.测试prettier是否生效

测试一：在代码中保存代码；ctrl+s或者

测试二：配置一次性修改的命令；

在package.json中配置一个scripts：

"prettier": "prettier --write ."

直接yarn prettier就能全局执行prettier

前端配置prettier工具格式化代码相关推荐

从esLint+Prettier开始格式化代码
1. 促使我要代码格式化的原因代码格式化和代码规范对研发者来说,都并不陌生.随手的保存,随手的格式化代码,总让我们的代码更加漂亮.但是我们在一次次的格式化中,偶尔也有一些问题. 在开发同一个项目时, ...
windows下使用indent工具格式化代码
在linux下可以用indent格式化c语言代码,本工具是indent的windows移植版本,只需要将含有indent.exe的文件夹放在有环境变量的路径下就可以在命令行下使用. 下载链接: htt ...
使用Prettier格式化代码
Prettier 文档 Prettier Prettier 用来检查代码风格问题,它支持多种语言,我们这里讨论关于 JavaScript 的,它主要解决的问题是:应该使用单引号还是双引号,什么地方 ...
VScode配置ESlint自动修复格式化
使用vscode安装 eslint + vuter + prettier自动格式化代码配置; 文件-首选项-设置-用户设置-拓展-ESlint-点击"在setting.json"中 ...
更新版-梳理前端开发使用eslint和prettier来检查和格式化代码问题
更新版,之前的版本可以看这里:梳理前端开发使用eslint和prettier来检查和格式化代码问题一.问题痛点在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发.因此编写符合团队编 ...
前端开发小工具的使用(FSCapture、Chrome、Emmet语法、IDEA自动格式化代码、Snipaster）
目录 1. FSCapture 2. Chrome 3. Emmet语法 3.1 HTML部分 3.2 CSS部分 4. IDEA自动格式化代码 5. Snipaster 6. photoshop 6 ...
编辑器eslint格式_VScode格式化代码，开启ESlint代码检测方法，eslint代码配置
ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有 ...
代码查看工具_不好用打我 | 六个前端开发在线工具推荐
https://blog.csdn.net/EAPxUO/article/details/105648315 EnjoyCSS 老实说,虽然我做过许多前端开发,但我并不擅长 CSS.当我陷入困境时,E ...
VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查
vscode 前端最佳插件配置格式化代码时用到的插件 ESLint(代码规范和错误检查工具,控制代码质量) Prettier(代码格式化工具) Vetur(识别 vue 文件) EditorConf ...
代码风格统一：使用husky, prettier, eslint在代码提交时自动格式化，并检查代码。...
引言这个需求主要是组内成员用的编辑器不统一,代码风格也各异,所以在修改代码时,如果格式化了代码,在code review阶段很难分辨修改了的代码.当然,代码风格统一还有其他好处,这里就不不多废话了. ...

前端配置prettier工具格式化代码

前端配置prettier工具格式化代码相关推荐

最新文章

热门文章