一、prettier介绍

prettier是一款代码格式化插件，插件id为：esbenp.prettier-vscode
传送门：beautify官方文档

二、下载

下载prettier插件

三、配置vscode

如下图所示修改settings.json，设置使用esbenp.prettier-vscode这款插件作为html、css、less、js、vue的格式化工具

四、配置.prettierrc.yml

esbenp.prettier-vscode插件配置文档：https://prettier.io/docs/en/configuration.html
esbenp.prettier-vscode插件所有可选项+含义：https://prettier.io/docs/en/options.html
推荐使用.prettierrc.yml或者.prettierrc.js，因为相比于.prettierrc.json，yml和js可以添加注释，而json不行。如果.prettierrc.json使用jsonc格式保存，虽然可以添加注释，但是格式化却没效了。
下面是.prettierrc.yml的配置文件，根据需求自行更改

# 每行最多多少个字符换行
# printWidth: 100
#  tab缩进大小默认为2
tabWidth: 2
#  使用tab缩进，默认false
useTabs: false
#  使用分号 默认true
semi: false
#  使用单引号 默认false(在jsx中配置无效, 默认都是双引号)
singleQuote: false
#  行尾逗号,默认none可选 none|es5|all
#  es5 包括es5中的数组、对象
#  all 包括函数对象等所有可选
TrailingCooma: all
#  对象中的空格 默认true
#  true: { foo: bar }
#  false: {foo: bar}
bracketSpacing: true
#  JSX标签闭合位置 默认false
#  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>
bracketSameLine: true
jsxBracketSameLine: true
#  箭头函数参数括号 默认avoid 可选 avoid| always
#  avoid 能省略括号的时候就省略 例如x => x
#  always 总是有括号
arrowParens: avoid# endOfLine: "<lf|crlf|cr|auto>"
# "lf" – Line Feed only (\n), common on Linux and macOS as well as inside git repos
# "crlf" - Carriage Return + Line Feed characters (\r\n), common on Windows
# "cr" - Carriage Return character only (\r), used very rarely
# "auto" - Maintain existing line endings (mixed values within one file are normalised by looking at what’s used after the first line)
endOfLine: crlfproseWrap: true

vscode环境搭建：配置prettier相关推荐

Latex与VSCode环境搭建问题解决
Latex与VSCode环境搭建-----实现前向搜索和后向搜索定位文字--前向搜索失败后向成功相关的教程有很多,这里给出写的比较好的两个 https://zhuanlan.zhihu.com/p/ ...
PyQt5 环境搭建+配置+怎样运行生成的.py程序
PyQt5 环境搭建+配置+怎样运行生成的.py程序 PyQt5安装及配置安装配置 Error while finding module specification for 'PyQt5.uic. ...
服务器php环境配置续费,php 服务器环境搭建配置
摘要腾兴网为您分享:php 服务器环境搭建配置,钻石星球,智慧农业,思维导图,扇贝单词等软件知识,以及华为主题app,mychrome,花椒直播app,漫画猫,d3dx9_34.dll,360骑卫士 ...
VSCode环境下配置ESLint 对Vue单文件的检测
本文介绍了在VSCode环境下如何配置eslint进行代码检查,并介绍了如何对.vue单文件进行支持. ESLint 安装 1.在工程根目录下,安装eslint及初始化 $ npm install e ...
Hadoop学习笔记——入门教程（虚拟机安装LinuxHadoop环境搭建配置）
文章目录一.Hadoop安装配置文档及注意事项二.Hadoop概述 2.1.Hadoop是什么 2.2.Hadoop的发展历史 2.3.Hadoop三大发行版本 2.3.1 Apache Hado ...
Jenkins+Jmeter+Gitlab+Ant接口自动化持续集成构建（环境搭建配置）
第一步:环境搭建: 准备工作: Java及jdk配置.jmeter安装配置.Jenkins搭建完成.安装Ant 一.JDK配置 JDK配置请百度自行配置二.Jmeter安装配置 1.把 apache ...
VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查
vscode 前端最佳插件配置格式化代码时用到的插件 ESLint(代码规范和错误检查工具,控制代码质量) Prettier(代码格式化工具) Vetur(识别 vue 文件) EditorConf ...
常用开发环境搭建配置教程（OneStall）
最近想要做一个小东西,用到了下面几个中间件或者环境: Java Tomcat Maven MongoDB ZooKeeper Node 并且恰好碰到腾讯云打折,云主机原价100多一个月,花了30块钱买 ...
云服务器+花生壳+xming+vscode环境搭建（云服务器运行程序，本地进行GUI显示）
1.前言前两天没事网上冲浪,看到腾讯云出了个618活动(非广告,狗头保命),租了个轻量应用服务器(CPU: 2核,内存: 2GB,40GB SSD云硬盘),第一次用云服务器,想在云服务器上运行程序, ...
win7(32/64)+apache2.4+php5.5+mysql5.6 环境搭建配置
首先要有耐心仔细读完全文,尤其是括号里面的注释. 环境:win7 32.(64位的同理,下载相关软件必须是对应的64位版本) 所需软件: 0.安装Apache的前必须安装VC11 vcredist ...

vscode环境搭建：配置prettier

一、prettier介绍

二、下载

三、配置vscode

四、配置.prettierrc.yml

vscode环境搭建：配置prettier相关推荐

最新文章

热门文章