vscode 使用Prettier插件格式化配置使用代码详解

参考

使用ESLint+Prettier来统一前端代码风格

vscode 配置vue+vetur+eslint+prettier自动格式化功能

问题描述

  1. 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然还有其他许多…
  2. 第一反应就是反感,后面冷静一想,还是自己做事的态度有问题,做完了功能已经完成了95%,为什么不到最后一步一键格式化,做到百分百呢?反思中

为了让以后代码美观,不让别人吐槽,自己整理了vscode + prettier

1.使用vscode 安装 prettier 插件

2.创建一个 .prettierrc.js 文件

module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, // 使用单引号
 "printWidth": 200, // 超过最大值换行
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, // 结尾不用分号
 "disableLanguages": ["vue"] // 不格式化vue文件,vue文件的格式化单独设置
};

在网上查了在vscode中配置 prettier的,感觉不生效,就不做过多演示了

why prettier?

我说一下个人的理解

  • 格式化的范围更广,HTML、CSS、JavaScript、ES6(Class的写法)、JSX、typescript;prettier 应用更广泛点
  • eslint 的eslint fix all auto-fixable problems也比较方便自动修改符合eslint规范的代码,差异不大
  • vetur 适合vue文件,使用比较局限

工具符合自己的习惯,顺手就好

Prettier 的配置文件类型

  1. 根目录创建.prettierrc 文件,能够写入YML、JSON的配置格式,并且支持.yaml/.yml/.json/.js后缀;
  2. 根目录创建.prettierrc.js文件,并对外export一个对象
module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, // 使用单引号
 "printWidth": 200, // 超过最大值换行
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, // 结尾不用分号
 "disableLanguages": ["vue"] // 不格式化vue文件,vue文件的格式化单独设置
 "trailingComma": "none" // 函数最后不需要逗号
};

推荐使用js文件作为配置文件,这样可以在配置文件中写注释,方便理解

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

{
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true,
 "semi": false
}

不能在json文件中写注释

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": 100, // 超过最大值换行
 "prettier.tabWidth": 4, // 缩进字节数
 "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的代码格式进行校验
}

问题整理

Vue 文件格式化之后报space-before-function-paren错误?

在网上想找prettier直接修改解决的办法,发现没有,只能另辟蹊径,下面是我整理的

1.安装eslint插件

2.先用 prettier 插件格式化

3.鼠标放到script代码中,右键 -> 源代码操作 -> eslint fix all auto-fixable problems 格式化

Vue文件中的HTML>结尾符号换行?

1.将配置文件.prettierrc.js的printWidth属性设置最大长度,尽量让html在同一行,如果html过长,换行的也是存在的,可以针对极少的手动去修改

module.exports = {
 "printWidth": 200, // 超过最大值换行
};

格式化函数的最后一个参数后面有逗号?

尾随逗号 Trailing Commas
多行时尽可能打印尾随逗号。(例如,单行数组永远不会得到尾随逗号。)

module.exports = {
	"trailingComma": "none" // 函数最后不需要逗号
};

有效选项:

“none” - 没有尾随逗号。

“es5” - 在ES5中有效的尾随逗号(对象,数组等)

“all” - 尽可能使用尾随逗号(包括函数参数)。这需要 nodejs 8。

JSX>结尾符号换行?— JSX Brackets

将 > 多行 JSX 元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)。
默认CLIAPI/.prettierrc/prettier.config.js/package.json[“prettier”]
false--jsx-bracket-same-linejsxBracketSameLine:

module.exports = {
	"jsxBracketSameLine": true, // 在jsx中把'>' 不单独放一行
};

有效选项:

true - 示例:

<button
 className="prettier-class"
 id="prettier-id"
 onClick={this.handleClick}>
 Click Here
</button>

false - 示例:

<button
 className="prettier-class"
 id="prettier-id"
 onClick={this.handleClick}
>
 Click Here
</button>

总结

到此这篇关于vscode 使用Prettier插件格式化配置使用的文章就介绍到这了,更多相关vscode 使用Prettier插件格式化配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • prettier自动格式化去换行的实现代码

    插件 新建 .prettierrc 文件在根目录,里面写上这个 第一个是超出800字符换行,第二个是单引号,第三个是结尾不要分号 vscode里面的设置文件settings.json代码 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.for

  • vscode 配置vue+vetur+eslint+prettier自动格式化功能

    该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和eslint会有冲突,所以没用上. vscode ESlint插件 Eslint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示,后面的自定格式化根据这里的错误提示进行格式化操作. 基于vue-cli创建的项目 以下相关步骤需要注意: 创建的时候把Linter/For

  • 详解如何在vue项目中使用eslint+prettier格式化代码

    对于前端代码风格这个问题一直是经久不衰,每个人都有自己的代码风格,每次看到别人代码一团糟时候我们都会吐槽下.今天给大家介绍如何使用eslint+prettier统一代码风格. 对于eslint大家应该比较了解了,是用来校验代码规范的.给大家介绍下prettier,prettier是用来统一代码风格,格式化代码的,支持js.ts.css.less.scss.json.jsx.并且集成了vscode.vim.webstorm.sublime text插件. 如果你的项目中采用的是ellint默认规则

  • vscode 使用Prettier插件格式化配置使用代码详解

    参考 使用ESLint+Prettier来统一前端代码风格 vscode 配置vue+vetur+eslint+prettier自动格式化功能 问题描述 最近用Nodejs + express 写了一个zip文件上传的功能,代码给了别人看,各种吐槽,代码不规范,没有按照eslint,编辑器打开就是各种红色提醒,当然还有其他许多- 第一反应就是反感,后面冷静一想,还是自己做事的态度有问题,做完了功能已经完成了95%,为什么不到最后一步一键格式化,做到百分百呢?反思中 为了让以后代码美观,不让别人吐

  • vscode使用editorconfig插件以及.editorconfig配置文件说明详解

    简介 EditorConfig和Prettier一样,都是用来配置格式化你的代码的,这个格式化代码,要和你lint配置相符!否则会出现你格式化代码以后,却不能通过你的代码校验工具的检验 EditorConfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置,例如缩进样式.选项卡宽度.行尾字符以及编码等,而无需考虑使用的编辑器vscode使用editorconfig插件以及.editorconfig配置文件说明详解 或 IDE editorConfig不是什么软件,而是一个名称为.edi

  • spring boot application properties配置实例代码详解

    废话不多说了,直接给大家贴代码了,具体代码如下所示: # =================================================================== # COMMON SPRING BOOT PROPERTIES # # This sample file is provided as a guideline. Do NOT copy it in its # entirety to your own application. ^^^ # ========

  • Go 字符串格式化的实例代码详解

    Go对字符串格式化提供了良好的支持.下面我们看些常用的字符串格式化的例子. package main import "fmt" import "os" type point struct { x, y int } func main() { // Go提供了几种打印格式,用来格式化一般的Go值,例如 // 下面的%v打印了一个point结构体的对象的值 p := point{1, 2} fmt.Printf("%v\n", p) // 如果所格式

  • VSCode各语言运行环境配置方法示例详解

    系统环境变量的配置 如:将F:\mingw64\bin添加到系统环境变量Path中 VSCode软件语言json配置C语言 创建个.vscode文件夹,文件夹内创建以下两个文件 launch.json 文件配置 { "version": "0.2.0", "configurations": [ { "name": "(gdb) Launch", "type": "cppdbg&

  • vue 插件的方法代码详解

    在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置.但是官方 cli3 现在并不支持搭建 plugin 开发的项目. 还好,已经有大神(Kazupon)走在了我们前面,我们就用现成的vue-cli-plugin-p11n. 如果你没有安装 vue-cli,请先安装 npm i -g @vue/cli 首先,搭建项目 vue create [your plugin name] && cd [your plugin name] vue

  • eclipse的git插件安装、配置与使用详解

    1. eclipse的git插件安装与配置 1.1 git插件安装 新版本的eclipse已经自带了GIt了,就不用安装了. 老版本的eclipse安装Git,和安装一般插件过程一样: 点击help--Install new software 在弹出的框里面,输入git下载地址:http://download.eclipse.org/egit/updates/ 点击ok,如果没反应,请点击Add前面小三角,找到刚创建的以git为名字的项,稍等一会儿,出现这个框 name下面2项勾选起来,点击ne

  • springboot多数据源配置及切换的示例代码详解

    注:本文的多数据源配置及切换的实现方法是,在框架中封装,具体项目中配置及使用,也适用于多模块项目 配置文件数据源读取 通过springboot的Envioment和Binder对象进行读取,无需手动声明DataSource的Bean yml数据源配置格式如下: spring: datasource: master: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.mysql.cj.jdbc.Driver url:

  • Springboot配置返回日期格式化五种方法详解

    目录 格式化全局时间字段 1.前端时间格式化(不做无情人) 2.SimpleDateFormat格式化(不推荐) 3.DateTimeFormatter格式化(不推荐) 4.全局时间格式化(推荐) 实现原理分析 5.部分时间格式化(推荐) 总结 应急就这样 格式化全局时间字段 在yml中添加如下配置: spring.jackson.date-format=yyyy-MM-dd HH:mm:ss 或者 spring: jackson: ## 格式为yyyy-MM-dd HH:mm:ss date-

  • struts2配置静态资源代码详解

    Struts2框架有两个核心配置文件:struts.xml和Struts2默认属性文件default.properties(在struts2-core-2.3.20.jar中) default.properties可以通过自己在classpath下写一个struts.properties文件进行定制改写 为什么是struts.properties,这可以看org.apache.struts2.config下的DefaultSettings和PropertiesSettings源码 Default

随机推荐