vscode Prettier安装及配置

这篇具有很好参考价值的文章主要介绍了vscode Prettier安装及配置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、介绍:

Prettier 是一款流行的代码格式化工具,用于自动化和统一化代码的格式。它支持多种编程语言,并具有以下特点和优势:

  1. 自动格式化:Prettier 能够自动解析代码,并根据预定义的规则和配置选项对代码进行格式化,省去手动调整代码风格的麻烦。

  2. 一致的代码风格:Prettier 通过应用一致的代码风格规则,确保项目中的所有代码具有统一的风格,减少团队成员之间的风格冲突,并提高代码的可读性。

  3. 可配置性:Prettier 提供了一系列的配置选项,可以根据项目需求和个人偏好进行调整。您可以自定义缩进、引号类型、分号使用等一系列的格式化规则。

  4. 跨平台支持:Prettier 可以在各种操作系统和开发环境中使用,包括 Windows、MacOS 和 Linux。它可以与主流的编辑器、IDE 和构建工具集成,如 Visual Studio Code、WebStorm、ESLint 等。

  5. 支持多种编程语言:Prettier 支持多种编程语言,包括 JavaScript、TypeScript、CSS、HTML、JSON、Markdown、Vue、React、Angular 等。无论您在哪种语言中编写代码,Prettier 都能够提供一致的代码格式化体验。

使用 Prettier 可以帮助团队保持一致的代码风格,提高代码的可读性和维护性,并节省时间和精力,让开发者可以专注于编写高质量的代码。

二、安装:

vscode prettier配置,vscode,ide,编辑器vscode prettier配置,vscode,ide,编辑器
vscode prettier配置,vscode,ide,编辑器

三、.prettierrc 配置文件

.prettierrc.json 是 Prettier 格式化工具的配置文件,用于指定代码格式化的规则和风格。下面是一些可能的配置选项:

{
  "printWidth": 80, // 指定行的最大长度
  "tabWidth": 2, // 指定缩进的空格数
  "useTabs": false, // 是否使用制表符进行缩进,默认为 false
  "singleQuote": true, // 是否使用单引号,默认为 false
  "quoteProps": "as-needed", // 对象属性是否使用引号,默认为 "as-needed"
  "trailingComma": "none", // 是否使用尾随逗号(末尾的逗号),可以是 "none"、"es5"、"all" 三个选项
  "bracketSpacing": true, // 对象字面量中的括号是否有空格,默认为 true
  "jsxBracketSameLine": false, // JSX 标签的右括号是否与前一行的末尾对齐,默认为 false
  "arrowParens": "always", // 箭头函数参数是否使用圆括号,默认为 "always"
  "rangeStart": 0, // 指定格式化的范围的起始位置
  "rangeEnd": Infinity, // 指定格式化的范围的结束位置
  "requirePragma": false, // 是否需要在文件顶部添加特殊的注释才能进行格式化,默认为 false
  "insertPragma": false, // 是否在格式化后的文件顶部插入特殊的注释,默认为 false
  "proseWrap": "preserve", // 是否保留 markdown 文件中的换行符,默认为 "preserve"
  "htmlWhitespaceSensitivity": "css", // 指定 HTML 文件中空格敏感度的配置选项,可以是 "css" 或 "strict" 两个选项
  "vueIndentScriptAndStyle": false, // 是否缩进 Vue 文件中的 <script> 和 <style> 标签,默认为 false
  "endOfLine": "auto", // 指定换行符的风格,可以是 "auto"、"lf"、"crlf"、"cr" 四个选项
  "semi": true, // 行末是否添加分号,默认为 true
  "usePrettierrc": true, // 是否使用项目根目录下的 .prettierrc 文件,默认为 true
  "overrides": [ // 针对特定文件或文件类型的格式化配置
    {
      "files": "*.json", // 匹配的文件或文件类型
      "options": {
        "tabWidth": 4 // 针对该文件类型的配置选项
      }
    },
    {
      "files": "*.md",
      "options": {
        "printWidth": 100
      }
    }
  ]
}

可以根据自己的项目需求和个人喜好,选择适合的配置选项。请注意,在项目中创建或修改 .prettierrc.json 文件后,确保您的 IDE 或编辑器已配置为使用 Prettier 进行代码格式化。
此外,还有一些高级配置选项可以进一步调整 Prettier 的行为。您可以在 Prettier 的官方文档中查找更多详细信息和配置选项:文章来源地址https://www.toymoban.com/news/detail-837996.html

  • Prettier 的官方文档

到了这里,关于vscode Prettier安装及配置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode - 配置Prettier插件和.editorconfig文件使用介绍

    官方解释:Prettier是一个固执己见的代码格式化程序。它通过解析代码并使用自己的规则重新打印代码来强制实现一致的风格,这些规则考虑了最大行长度,并在必要时包装代码。 其实就是一个代码格式化工具,是你写的代码更加合理和优美,同时这个插件配置也是非常的简

    2024年02月02日
    浏览(39)
  • VSCode中Prettier插件&依赖安装及冲突解决

    1.1 安装Prettier插件 通过 VSCode 安装插件,如图: 1.2 添加Prettier配置文件 在项目根目录,添加 Prettier 配置文件 .prettierrc ,编写配置如下: 1.3 配置格式化工具 在任意页面右键,选择 格式化工具 ,如图: 将 Prettier 配置为格式化默认工具即可 1.4 配置自动格式化 选择 设置 ,如

    2023年04月08日
    浏览(37)
  • vsCode配置Eslint+Prettier结合使用详细配置步骤,规范化开发

            eslint它规范的是代码偏向语法层面上的风格 。本篇文章以一个基本的vue项目,来说明eslint+prettier+husky配置项目代码规范,为了更好的描述本文,我恢复了vscode的默认设置(即未安装eslint,prettier等插件,setting中也没有相关配置) 1、新建vue3.0脚手架项目 2、项目安装

    2023年04月17日
    浏览(45)
  • vscode自动格式化插件配置说明(Prettier - Code formatter)

    1、在应用商店搜索Prettier并下载 2、下载完成之后点击扩展设置  3、点击右上角json配置文件  4、在文件中添加如下代码 5、如果需要格式化vue文件,建议配合ESLint、Vetur两个插件一起使用  一款好用的eslint自动修复插件:eslint-config

    2024年02月12日
    浏览(56)
  • vscode vue3开发常用插件(附Prettier格式化配置)

    1、Chinese (Simplified) (简体中文) Language 2、Prettier - Code formatter 3、Vue 3 Snippets 4、Vue Language Features (Volar) 5、git graph 5、Auto Close Tag 6、Vue Theme 按ctrl+shift+p,搜索setting进入用户设置(全局),添加下面规则: 需要注意的是,prtttier格式化可以配置在很多文件上,配置字段也不太一样

    2024年02月14日
    浏览(57)
  • VsCode中Vue代码格式插件,Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置

    Vetur是一款Vue代码高亮显示的一款插件,在没有使用此插件前,以 .vue的文件名代码是没有颜色的!!! 安装步骤:在扩展商店中搜索(  Vetur  )点击安装  ESLint插件主要用来检测代码的语法格式,以便我们规范书写,避免因编译所发生的错误 。 安装步骤:在扩展商店中搜

    2024年02月16日
    浏览(36)
  • 【VScode】ESLint :warning Delete `CR` prettier/prettier

    作用     检查 Javascript 编程时的语法错误。 新建或修改文件时报错 原因      Windows系统 ,clone的代码会自动把换行符 LF 转为回车符 CRLF ,这时本地的代码都是回车符。可在prettier.config.js中查看到 检查配置(ESLint中是否支持JavaScript/vue语言) (1)在VScode中,使用Ctr + 打开

    2024年02月02日
    浏览(56)
  • Delete `␍`eslint(prettier/prettier) in vscode 的解决方案

    从 Github 仓库拉取代码,使用 vscode 打开,页面报错,每一行都爆红 (如下图) 由于历史原因,windows下和linux下的文本文件的换行符不一致。 Windows在换行的时候,使用了换行符 CRLF 而Mac和Linux系统,仅仅使用了换行符 LF 老版本的Mac系统使用的是回车符 CR 本人的电脑是 windo

    2024年02月07日
    浏览(52)
  • vscode设置Prettier为默认格式化插件

    1. 目的:ctrl+s保存,自动格式化文档 2. 所需插件Prettier 3. 操作步骤 先打开vscode软件,左下角点击设置 — 打开设置 ---- 在右上方有一个搜索框。 先设定自动保存文件,搜索框贴入 files.autoSave 筛出设置项,并把设置项属性选择为 onFocuschange 。 设定编辑器默认代码格式化(美化

    2024年02月06日
    浏览(56)
  • vscode使用eslint及prettier配合解决代码格式问题

    esLint是提供一个插件化的javascript代码检测工具。 esLint 配置文件遵循 commonJS 的导出规则,所导出的对象是 eslint 的配置对象。 1、打开vscode 在插件选项中找到对应插件进行安装即可。 2、新建一个.prettierrc文件 在该文件下,写入一下代码 3、设置vscode保存代码时,让代码符合

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包