更多VSCode插件使用请访问:VSCode常用插件汇总


Prettier - Code formatter这是一款 格式化js、css代码插件,暂不解释。

Prettier是什么?

Prettier的中文意思是“漂亮的、机灵的”,也是一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点:

1.可配置化

2.支持多种语言

3.集成多数的编辑器

4.简洁的配置项

使用Prettier在code review时不需要再讨论代码样式,节省了时间与精力。

如何对Prettier进行配置

一共有三种方式支持对Prettier进行配置:

1.根目录创建 .prettierrc 文件,能够写入YMLJSON的配置格式,并且支持.yaml.yml.json.js后缀;

2.根目录创建 .prettier.config.js 文件,并对外export一个对象;

3.在 package.json 中新建prettier属性。

下面我们使用 prettierrc.js 的方式对prettier进行配置,同时讲解下各个配置的作用。

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

配置大概列出了这些,还有一些其他配置可以在官方文档进行查阅。

注意一点,parser的配置项官网列出了如下可选项:

  • babylon
  • flow
  • typescript Since v1.4.0
  • postcss Since v1.4.0
  • json Since v1.5.0
  • graphql Since v1.5.0
  • markdown Since v1.8.0

但是如果你使用了vue的单文件组件形式,记得将 parser 配置为vue,目前官方文档没有列出来。当然如果你自己写过AST的解析器,也可以用你自己的写的 parser: require("./my-parser")

Prettier + editorConfig 搭配使用处理旧项目文件

editorConfig使用文档

如果你有一个旧项目想通过Prettier + editorConfig来简单规范一下格式也可以使用这个工具:

1.分别安装两个工具不必多说了

2.创建 .prettierrc 配置文件

该配置文件会继承 editorConfig 的配置

3.向 package.json 添加可执行脚本: prettier": "prettier --write ./*

例如:

prettier": "prettier --write './src/**/*.js' './src/**/*.jsx' './src/**/*.css' './src/**/*.scss'

4.创建 .prettierignore 文件,用来忽略一些文件 && 目录

5.一切准备就绪之后 !!!! npm run prettier 就可以看到提示文件更改记录了

.prettierrc.js配置文件:

# .prettierrc.js 配置文件

// https://prettier.io/docs/en/options.html

module.exports = {
trailingComma: "none", // 数组 对象尾随不需要逗号
bracketSpacing: true, // 对象空格 { foo: bar }, false=> {foo:bar}
jsxBracketSameLine: false, // jsx闭标签是否另起一行 <Test></Test>
arrowParens: 'always', // 箭头函数,只有一个参数的时候,也需要括号
singleQuote: true, // 单引号
semi: true, //是否在语句末尾就分号
};

.prettierignore 文件配置

# .prettierignore 文件配置
/node_modules
/dist
/src/lib/
/src/global/fonts /docs
/.vscode
node_modules
.eslintrc.js
package.json
package-lock.json

Prettier - Code formatter使用的更多相关文章

  1. Android Studio Eclipse Code Formatter

    在从Eclipse转到Android Studio上开发后,如果还想继续使用在Eclipse上制定的自定义的Code Formatter的话,需要按如下步骤操作:1.进入Settings界面,如果能看 ...

  2. 【Idea】idea code style配置eclipse code formatter

    在eclipse中有自动配置code style的功能 ,但是idea上却没有,这个时候需要自己手工配置 1. 在idea中找到Preference->Plugins->Browse re ...

  3. idea中Eclipse Code Formatter插件设置和使用,以及注释模板的修改

    在settings里面找到plugins这个选项,搜索Eclipse Code Formatter,点击安装,重启idea即可进行配置: 首先,先安装Eclipse Code Formatter插件: ...

  4. Book Contents Reviews Notes Errata Articles Talks Downloads Resources Code Formatter Cover of C# in Depth Order now (3rd edition) Implementing the Singleton Pattern in C#

    原文链接地址: http://csharpindepth.com/Articles/General/Singleton.aspx#unsafe Implementing the Singleton P ...

  5. Visual Studio Code扩展:

    Auto Close TagAuto Rename TagBeautifyChinese (Simplified) Language Pack for Visual Studio CodeClass ...

  6. 在vscode中使用eslint+prettier格式化vue项目代码 (转载)

    ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...

  7. 高效开发者是如何个性化VS Code插件与配置的?

    2年之前,我放弃了Sublime Text,选择了Visual Studio Code作为代码编辑器. 我每天花在VS Code上的时间长达5~6个小时,因此按照我的需求优化VS Code配置十分必要 ...

  8. 作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

    本文翻译自:https://www.sitepoint.com/vs-code-extensions-javascript-developers/ 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的 ...

  9. eslint prettier editrorconfig - 写出干净的前端代码

    FConfidence 关注 2018.12.30 02:38* 字数 2912 阅读 195评论 0喜欢 0 VSCode 插件安装 Prettier - Code Formatter ESLint ...

随机推荐

  1. Linux安装Redis,在测试阶段即make test出现“You need tcl 8.5 or newer in order to run the Redis test”问题解决方案

    Linux安装Redis,在测试阶段即make test出现"You need tcl 8.5 or newer in order to run the Redis test"问题 ...

  2. 最短路问题 Dijkstra算法- 路径还原

    // 路径还原 // 求最短路,并输出最短路径 // 在单源最短路问题中我们很容易想到,既然有许多条最短路径,那将之都存储下来即可 // 但再想一下,我们是否要把所有的最短路径都求出来呢? // 实际 ...

  3. Bash脚本编程学习笔记08:函数

    官方资料:Shell Functions (Bash Reference Manual) 简介 正如我们在<Bash脚本编程学习笔记06:条件结构体>中最后所说的,我们应该把一些可能反复执 ...

  4. java new一个对象的过程中发生了什么?

    java在new一个对象的时候,会先查看对象所属的类有没有被加载到内存,如果没有的话,就会先通过类的全限定名来加载.加载并初始化类完成后,再进行对象的创建工作. 我们先假设是第一次使用该类,这样的话n ...

  5. ADO.NET事务封装

    在数据库工具类编写的过程中,对事务的处理操作想避免各个原子操作的事务对象赋值重复操作,想对外暴露的方法为如下形式 public bool ExecuteTransition(Action Transi ...

  6. selenium获取缓存数据

    爬虫呢有时候数据方便有时候登入获得cookies,以及获取他存缓存中的数据 一.获取缓存中的数据其实很简单js注入就好了 localStorage_1 = driver.execute_script( ...

  7. openssl CVE-2016-2107 漏洞检测

    最近在安装python3 时升级openssl 版本,在摸索openssl 升级过程中才发现centos6 默认安装的openssl 1.0.1e 版本是有一个严重的漏洞的(Padding oracl ...

  8. opencv —— imread、namedWindow & imshow、cvtColor、imwrite 加载、显示、修改、保存图像

    加载图像:imread 函数 Mat imread(const string& filename, int flags = 1): filename:需要载入的图像的路径名. flags:加载 ...

  9. 基于AccessToken方式设计API

    目录 数据库设计 实现方案 应用场景:公司A有一平台需要对外提供接口给其他商户使用,考虑到安全性问题,此时可考虑采用AccessToken方案.商户在公司A平台注册一app,平台分配appId.app ...

  10. JS格式时间

    Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, //month &q ...