vscode使用Prettier Code插件的详细教程

为什么要使用prettier？

在大公司，前端开发的代码可能会有自己的代码规范，如果快速生成自己的代码规范呢？使用Prettier是一个比较好的选择！

如何安装Prettier Code插件？

在侧边栏最后一个选项，在搜索栏中搜索Prettier Code,然后安装即可。

项目中如何配置

在你新建的项目中，新建两个配置文件即可，一个是.prettierignore文件，这个文件的作用类似于.gitignore文件，为了忽略哪些文件;另外一个是.prettierrc.js文件，这个文件是配置你的代码校验规则。

.prettierignore配置如下

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

.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,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'auto',
};

这样所有配置就完成了，等你每次编写代码后，点击右键选择格式化文档即可

到此这篇关于vscode使用Prettier Code插件的详细教程的文章就介绍到这了,更多相关vscode使用Prettier Code内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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

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

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

  • vscode 配置eslint和prettier正确方法

    vscode 配置eslint和prettier正确方法

    ESlint ESLint 是一款语法检测工具.因为 JavaScript 本身是一门灵活的动态语言,一千个 JavaScriptor 就有一千种写法.为了方便人们的理解,快速上手别人的代码. 说明 在开发项目的时候,往往会通过eslint来检查代码格式,而prettier用来进行代码的格式化.本篇博文主要是记录使用vscode开发vue项目时的eslint和prettier的配置. vscode 安装插件 首先,需要在vscode上安装eslint和prettier的插件. 项目中的配置文件

  • vscode中eslint插件的配置（prettier配置无效）

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个eslint插件 装完后在文件----->首选项------->设置里找到settings.json(快捷键忘了) eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用).保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准 &

  • vscode使用Prettier Code插件的详细教程

    vscode使用Prettier Code插件的详细教程

    为什么要使用prettier? 在大公司,前端开发的代码可能会有自己的代码规范,如果快速生成自己的代码规范呢?使用Prettier是一个比较好的选择! 如何安装Prettier Code插件? 在侧边栏最后一个选项,在搜索栏中搜索Prettier Code,然后安装即可. 项目中如何配置 在你新建的项目中,新建两个配置文件即可,一个是.prettierignore文件,这个文件的作用类似于.gitignore文件,为了忽略哪些文件;另外一个是.prettierrc.js文件,这个文件是配置你的代

  • 最新VScode C/C++ 环境配置的详细教程

    前言 一次在VScode上配置C/C++环境的记录. 一.VScode下载及安装 VScode官网下载链接:https://code.visualstudio.com/Download 1.安装路径自行选择,例如我的安装路径为D:\Program Files\Microsoft VS Code: 2.安装完成进入VScode后按照步骤install中文插件完成汉化(此处我已完成汉化,故插件包显示"卸载",未安装情况下此处应显示"install"): 3.以同样的步骤

  • Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)

    下面通过三种方法给大家介绍Pycharm2020.1安装中文语言插件的方法,大家可以参考下: 方法一(在搜索不到插件): 1.安装好Pycharm并打开Pycharm 2.打开File,找到Settings并打开 3.打开Settings中的Pulgins,选择Marketplace,搜索chinese 出现下图这个就可以在线安装,不出现离线安装(方法二) 方法二(推荐): 1.查看Pycharm版本help–about 2.打开中文插件的下载地址(https://plugins.jetbrai

  • Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)

    注意事项: 1.PyCharm尽量在官网下载:https://www.jetbrains.com/pycharm/download/ 也可以用本文提供的安装包破解. 1.之前破解过需要删除原来的破解文件,比如lib目录下jetbrains-agent.jar,删除用户目录下的.PyCharm2019目录(建议卸载干净,重新安装). 本教程适用于PyCharm所有版本,其他jetbrains系列产品(Pycharm.Idea.WebStorm等也适用. 激活完成后,建议关掉自动更新设置. 激活步骤

  • Maven使用tomcat8-maven-plugin插件的详细教程

    在网上搜索一堆文章没找到解决方法,只找到了tomcat7-maven-plugin的plugin,如下: <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> </plugin> 并没有找到tomcat8-maven-plug

  • 教你在 IntelliJ IDEA 中使用 VIM插件的详细教程

    IdeaVim(下载)插件可以让你在IntelliJ IDEA中键盘敲的飞起. 安装 打开IDEA的设置,在Plugins里,你可以选择在线搜索Vim安装,当然如果不行,就可以选择单独下载后安装,以下是下载安装的方法: 直接选择前面下载的ZIP包即可,然后重启IDEA,重启后会发现,在tools里有了这个插件的开关: 后面的Ctrl+分号是我重定义之后的,默认的你会看到是Ctrl+Alt+V,意思就是你可以选择重新定义,重定义键位的地方在这里: 接下来,你就可以通过这个按键来选择是否开启VIM模

  • VS2019下安装和破解 DevExpress 19.2 插件的详细教程

    VS2019下安装和破解 DevExpress 19.2 插件的详细教程

    目录 0.写在最前本人vs版本为: 1.下载DevExpress最新版本插件程序官网下载试用30天地址: 2.下载完成以后安装DevExpress程序 3.下载DevExpress.Patch8.0 4.执行破解文件 5.查看DX控件是否显示 6.插件注册 0.写在最前本人vs版本为: 1.下载DevExpress 最新版本插件程序官网下载试用30天地址: https://www.devexpress.com/products/net/controls/winforms/ 2.下载完成以后安装D

  • 成功安装vscode中go的相关插件(详细教程)

    让你成功安装vscode中go的相关插件 注意:该演示环境是windows环境,linux和mac环境操作思路一样 vscode中有很多go的相关插件,非常好用如下: gocode gopkgs go-outline go-symbols guru gorename gomodifytags goplay impl godef goreturns golint gotests dlv 但是由于各种原因,这些插件无法安装,甚至你翻墙之后发现也还是无法安装,加上最近翻墙被限制的这么严格,所以总结了如

  • go本地环境配置及vscode go插件安装的详细教程

    1.go下载安装 下载地址:https://www.golangtc.com/download 当前最新版本是     go1.9.2 当前windows环境下选择     go1.9.2.windows-amd64.zip 然后解压就可以了 2.配置环境变量 Golang在windows下需要配三个环境变量,如图 点击计算机-->属性-->高级系统设置-->环境变量 1.配置GOROOT变量,在系统变量中点击新建,变量值是go安装文件夹目录 2.配置Path变量,因为Path变量已存在

  • VS Code配置Go语言开发环境的详细教程

    VS Code是微软开源的一款编辑器,插件系统十分的丰富.本文就介绍了如何使用VS Code搭建Go语言开发环境. VS Code配置Go语言开发环境 说在前面的话,Go语言是采用UTF8编码的,理论上使用任何文本编辑器都能做Go语言开发.大家可以根据自己的喜好自行选择.编辑器/IDE没有最好只有最适合. 下载与安装 VS Code官方下载地址:https://code.visualstudio.com/Download 三大主流平台都支持,请根据自己的电脑平台选择对应的安装包. 双击下载好的安

随机推荐