前端代码规范速成 prettier

在vscode编译器中搜索并安装prettier - code

安装完成后在项目的根目录会多一个.prettierrc.js文件，

在这个文件里面可以配置代码规则，如果你新建了一项目，没有这个文件,可以创建一个.prettierrc.js文件，并复制以下代码。

module.exports = {// 一行最多 100 字符printWidth: 100,// 使用 2 个空格缩进tabWidth: 2,// 不使用缩进符，而使用空格useTabs: false,// 行尾需要有分号semi: true,// 使用单引号singleQuote: true,// 对象的 key 仅在必要时用引号quoteProps: 'as-needed',// jsx 不使用单引号，而使用双引号jsxSingleQuote: false,// 末尾不需要逗号trailingComma: 'all',// 大括号内的首尾需要空格bracketSpacing: true,// jsx 标签的反尖括号需要换行jsxBracketSameLine: false,// 箭头函数，只有一个参数的时候，也需要括号arrowParens: 'always',// 每个文件格式化的范围是文件的全部内容rangeStart: 0,rangeEnd: Infinity,// 不需要写文件开头的 @prettierrequirePragma: false,// 不需要自动在文件开头插入 @prettierinsertPragma: false,// 使用默认的折行标准proseWrap: 'preserve',// 根据显示样式决定 html 要不要折行htmlWhitespaceSensitivity: 'css',// 换行符使用 lfendOfLine: 'auto',
};

当然，你可以在项目根目录创建一个名为.prettierignore的文件，在里面配置忽略格式化的文件类型或文件名称

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test

使用方式
写完代码后，右键点击代码空白处，出现弹框，点击格式化文档即可

前端代码规范速成 prettier - code formatter相关推荐

Vs Code中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置
文章目录一.插件的介绍与安装 1.Vetur插件 2.ESLint 插件 3.Prettier - Code formatter插件二.相关文件配置总结前面主要先对插件进行介绍和如何安装,之后 ...
前端代码规范工具ESLint和Prettier
前端代码规范工具ESLint和Prettier 1. ESLint是什么? ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建 ...
前端代码规范之代码格式化配置
前言由于每个前端人员的格式化配置或安装的格式化插件不一,导致在对项目开发的过程中代码风格不一,影响团队开发效率: 为了方便维护及统一代码风格制定团队的一套格式化配置,来对项目代码进行约束以及对部分问 ...
VSCode中的Prettier - Code formatter插件配置
一.Prettier - Code formatter 文件配置 settings.json文件参考文章@前端烂笔头参考文章@m0_57617148 关闭eslint语法报错: 参考文章@钢镚儿吖 ...
vue .prettierrc文件常见配置，以及配置 Prettier - Code formatter 插件格式化
使用vcode下载安装 Prettier - Code formatter(要启用该插件) 然后还要设置 vcode 编辑器的默认格式化为 Prettierxxx , 操作步骤: 在vcode ...
代码规范之prettier+eslint实践
eslint:code quality linter prettier: code formatter 二者结合使用既能达到团队代码协作风格一致(比如空格宽度,缩进等),又能做代码检查. 今天遇到一个 ...
[Client]前端代码规范及最佳实践
前端代码规范及最佳实践 2014/10/29 | 分类: WEB前端, 工具与资源, 开发 | 0 条评论 | 标签: 代码规范, 前端开发, 最佳实践分享到: 62 本文作者: 伯乐在线 - ...
网站开发之前端代码规范
前端代码规范前言一.唯一定律二.前段代码规范 (一)命名规范 1.1.项目命名 1.2 .目录命名 1.3.文件存放位置 1.4.JS.CSS.HTML.PNG 等文件命名 1.4.命名严谨性 ...
前端代码规范参考和如何保持前端代码规范
1.前端代码规范参考编写前端代码规范的主要驱动力是两方面: 1) 代码一致性(一个项目的代码看起来就像一个人写的一样) 2) 最佳实践. 通过保持代码风格和传统的一致性,我们可以减少遗留系统维护 ...

前端代码规范速成 prettier - code formatter

前端代码规范速成 prettier - code formatter相关推荐

最新文章

热门文章