Prettier+Vscode setting提高前端开发效率

文章目录

  • 前言
  • Prettier
    • 第一步：下载依赖（团队合作）或下载插件（独立开发）
    • 第二步：添加.prettierrc.json文件
      • **以下是我使用的**
      • **配置规则**
    • 第三步：添加.prettierignore文件
      • **以下是我常用的**
      • **配置规则**
    • 总结Prettier
  • VSCode中setting设置
    • 常见的setting设置
    • 配置解释
      • 1. 编辑器配置 (`editor` 部分)
      • 2. 保存时格式化的配置 (`editor.codeActionsOnSave`)
      • 3. 静默 ESLint 样式规则 (`eslint.rules.customizations`)
      • 4. 文件配置 (`files` 部分)
      • 5. ESLint 配置 (`eslint` 部分)
      • 6. 搜索和隐藏文件配置 (`files.exclude` 和 `search.exclude` 部分)
      • 7.清爽界面
    • 结尾

前言

  • 大家好，上一篇一文读懂 系列的文章中我们介绍了前端的代码格式化校验工具ESLient。代码格式是进行自动校验了，但你还要一个个的微调，很麻烦不是吗？

  • 本文介绍和ESLient配合使用的Prettier实现编译器自动将代码格式化。 同时也介绍VsCode的 setting设置，分享我开发时常用的配置。

  • 一文读懂 ESLint配置 一文读懂 ESLint配置

Prettier

    • Prettier可以通过JSON 、YAML 、JavaScript 等方式来进行配置。其作用就是自动统一代码风格，例如缩进、单/双引号、行尾逗号等，在本文将使用json进行配置。

第一步：下载依赖（团队合作）或下载插件（独立开发）

  • 如果你不是一个人，而是一个团队开发一个项目，这个时候就要给你的项目添加Prettier的相关依赖
  • 如果你只是个人开发，那么可以不用添加这个依赖，直接到VScode中下载相关插件就可以了
  • 两者都会影响到项目的代码自动格式化，区别只是下载依赖那么项目自己自带自动格式化，而不下载依赖本质上其实是 自己对编译器的私设

下载依赖

pnpm add -D prettier

下载插件

Prettier

image-20240819002220383

  • 没有安装的直接点击安装就可以了

第二步：添加.prettierrc.json文件

  • .prettierrc.json文件的主要作用就是定义自动格式化的格式

以下是我使用的

{"singleQuote": true,"semi": false,"printWidth": 100,"trailingComma": "all","endOfLine": "crlf","quoteProps": "as-needed","tabWidth": 2
}

配置规则

配置项取值解释示例
singleQuotetrue启用单引号，默认为 false。设置为 true 后，字符串使用单引号而不是双引号。const message = 'Hello, world!';
semifalse禁用分号，默认为 true。设置为 false 后，不在行尾添加分号。const name = 'John'
printWidth100设定每行的最大字符数，超过这个限制时会自动换行。默认为 80。一行代码超过 100 个字符时会自动换行
trailingComma'all'控制是否添加尾随逗号。可选值："none"（不添加）、"es5"（在 ES5 支持的地方添加）、"all"（在所有可能的地方添加）。const obj = { name: 'John', age: 30, }
endOfLine'crlf'指定行尾符号。可选值："lf"（换行符）、"crlf"（回车换行）、"cr"（回车）、"auto"（自动检测）。Windows 系统使用 CRLF，Unix 系统使用 LF
quoteProps'as-needed'控制对象属性名是否加引号。可选值："as-needed"（需要时加引号）、"consistent"（所有属性名加引号）、"preserve"（保持原样）。{ "name": 'John', age: 30 }（as-needed 时，age 没有引号）
tabWidth2指定缩进的空格数，默认为 2。代码缩进为 2 个空格

第三步：添加.prettierignore文件

  • prettierignore文件的作用就是指定哪些文件需要被格式化，哪些不需要

以下是我常用的

docs
dist
public
node_modules.versionrc
auto-imports.d.ts
components.d.ts**/dist/**
**/public/**
**/docs/**
**/node_modules/**
**/.versionrc/**
**/components.d.ts/**
**/auto-imports.d.ts/**types/**/*

配置规则

规则描述示例
/path/to/file忽略指定的文件路径config/settings.json 忽略 config 目录下的 settings.json 文件
/path/to/directory/忽略指定的目录及其所有子内容dist/ 忽略 dist 目录及其所有文件和子目录
*.extension忽略特定文件扩展名的所有文件*.log 忽略所有 .log 文件
**/directory/忽略所有子目录中与指定目录名匹配的内容**/build/ 忽略所有子目录中的 build 目录
directory/file.*忽略指定目录下匹配的所有文件类型src/**/*.test.js 忽略 src 目录下所有 .test.js 文件
!pattern使用 ! 进行反向匹配，不忽略特定文件或目录!important.js 表示不忽略 important.js 文件
/node_modules/通常用于忽略第三方依赖目录node_modules/ 忽略所有依赖
/dist/忽略打包输出目录dist/ 忽略构建生成的文件
path/**/file忽略路径中所有子目录下匹配的文件src/**/test.js 忽略 src 中所有子目录下的 test.js 文件

总结Prettier

image-20240819010023579

  • 如图，通过安装插件、依赖。然后再项目的外面的位置添加这两个文件就能使用Prettier啦。但是光有Prettier还不够，因此我们接下来需要在vscode中的setting设置使用Prettier为自动格式化工具。

VSCode中setting设置

  • 从字面意思来看也能知道setting的作用就是个性化你的VSCode，而且在项目中有一个setting设置，那么所有人都会使用统一个VSCode设置进行开发。包括但不限于：文件检索、字体大小，格式化等。

常见的setting设置

image-20240819000535556

下面是我的vscode中常用的设置，我接下来会一一进行讲解

{// Editor"editor.cursorSmoothCaretAnimation": "on","editor.guides.bracketPairs": "active","editor.tabSize": 2,"terminal.integrated.fontSize": 16,"editor.fontFamily": "'FiraCode Nerd Font', Consolas, 'Courier New', monospace","editor.hover.sticky": true,"explorer.confirmDelete": false,"editor.formatOnPaste": false,"editor.autoClosingBrackets": "always","editor.defaultFormatter": "esbenp.prettier-vscode","files.eol": "\r\n","files.simpleDialog.enable": true,// 保存时格式化"editor.codeActionsOnSave": {"source.fixAll": "never","source.fixAll.stylelint": "explicit","source.fixAll.eslint": "explicit","source.fixAll.prettier": "always"},"eslint.useFlatConfig": true,// Silent the stylistic rules in you IDE, but still auto fix them"eslint.rules.customizations": [{ "rule": "styles/*", "severity": "off" },{ "rule": "*-indent", "severity": "off" },{ "rule": "*-spacing", "severity": "off" },{ "rule": "*-spaces", "severity": "off" },{ "rule": "*-order", "severity": "off" },{ "rule": "*-dangle", "severity": "off" },{ "rule": "*-newline", "severity": "off" },{ "rule": "*quotes", "severity": "off" },{ "rule": "*semi", "severity": "off" }],// Enable eslint for all supported languages"eslint.validate": ["javascript","javascriptreact","typescript","typescriptreact","vue","html","markdown","json","jsonc","yaml"],// 文件格式化配置"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// 配置语言的文件关联"files.associations": {"pages.json": "jsonc", // pages.json 可以写注释"manifest.json": "jsonc" // manifest.json 可以写注释},// 隐藏文件，净化工作区可见文件"files.exclude": {// "**/.git": true,// "**/.svn": true,// "**/.hg": true,// "**/CVS": true,// "**/.DS_Store": true,// "**/Thumbs.db": true,// ".vite-cache": true,// ".npmrc": true,// ".stylelintignore": true,// "package-lock.json": true,// "config/vite.config.js.*": true,// "src/vite-env.d.ts": true,// "shims-uni.d.ts": true,// "**/shime-uni.d.ts": true,// "**/env.d.ts": true,// "vite.config.ts.timestamp-*": true,// "pnpm-lock.yaml": true},// 搜索时，排除文件"search.exclude": {"**/dist": true,"**/public": true,"**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true,"**/auto-imports.d.ts": true,"config/vite.config.js.*": true,"**/components.d.ts": true,"**/node_modules": true,"**/Thumbs.db": true,".vite-cache": true,".eslintignore": true,".stylelintignore": true,".prettierignore": true,"package-lock.json": true,".editorconfig": true,".gitignore": true}
}

配置解释

1. 编辑器配置 (editor 部分)

  // Editor"editor.cursorSmoothCaretAnimation": "on","editor.guides.bracketPairs": "active","editor.tabSize": 2,"terminal.integrated.fontSize": 16,"editor.fontFamily": "'FiraCode Nerd Font', Consolas, 'Courier New', monospace","editor.hover.sticky": true,"explorer.confirmDelete": false,"editor.formatOnPaste": false,"editor.autoClosingBrackets": "always","editor.defaultFormatter": "esbenp.prettier-vscode","files.eol": "\r\n","files.simpleDialog.enable": true,
设置项值描述
editor.cursorSmoothCaretAnimation"on"启用光标的平滑动画，使光标移动时更加顺滑。
editor.guides.bracketPairs"active"高亮匹配的括号对，"active" 表示仅高亮当前活动的括号对。
editor.tabSize2设置 Tab 键的缩进空格数为 2。
terminal.integrated.fontSize16设置 VSCode 集成终端的字体大小为 16。
editor.fontFamily'FiraCode Nerd Font', Consolas, 'Courier New', monospace设置编辑器使用的字体系列，优先使用 'FiraCode Nerd Font'。
editor.hover.stickytrue使得代码提示信息在鼠标悬停时不自动消失。
explorer.confirmDeletefalse禁用删除文件时的确认提示对话框。
editor.formatOnPastefalse禁用粘贴内容时自动格式化。
editor.autoClosingBrackets"always"设置自动补全括号功能始终开启。
editor.defaultFormatter"esbenp.prettier-vscode"指定使用 Prettier 扩展作为默认的代码格式化工具。
  • 这部分有一部分是界面美化，个人使用体验良好，推荐按照我的设置

2. 保存时格式化的配置 (editor.codeActionsOnSave)

  // 保存时格式化"editor.codeActionsOnSave": {"source.fixAll": "never","source.fixAll.stylelint": "explicit","source.fixAll.eslint": "explicit","source.fixAll.prettier": "always"},
设置项值描述
source.fixAll"never"保存时不应用任何自动修复操作。
source.fixAll.stylelint"explicit"保存时仅在显式请求时应用 stylelint 的自动修复操作。
source.fixAll.eslint"explicit"保存时仅在显式请求时应用 eslint 的自动修复操作。
source.fixAll.prettier"always"保存时始终应用 prettier 的自动格式化。

3. 静默 ESLint 样式规则 (eslint.rules.customizations)

 // Silent the stylistic rules in you IDE, but still auto fix them"eslint.rules.customizations": [{ "rule": "styles/*", "severity": "off" },{ "rule": "*-indent", "severity": "off" },{ "rule": "*-spacing", "severity": "off" },{ "rule": "*-spaces", "severity": "off" },{ "rule": "*-order", "severity": "off" },{ "rule": "*-dangle", "severity": "off" },{ "rule": "*-newline", "severity": "off" },{ "rule": "*quotes", "severity": "off" },{ "rule": "*semi", "severity": "off" }],
规则严重级别描述
styles/*"off"关闭所有与样式相关的规则（如 stylelint），但仍允许自动修复。
*-indent"off"关闭与缩进相关的规则。
*-spacing"off"关闭与间距相关的规则（如 no-trailing-spaces）。
*-spaces"off"关闭与空格相关的规则。
*-order"off"关闭与代码顺序相关的规则（如属性顺序）。
*-dangle"off"关闭与尾随逗号相关的规则（如 comma-dangle）。
*-newline"off"关闭与换行相关的规则（如行尾换行）。
*quotes"off"关闭与引号样式相关的规则（如单引号与双引号的选择）。
*semi"off"关闭与分号相关的规则（如是否强制分号）。

4. 文件配置 (files 部分)

​

设置项值描述
files.eol"\r\n"设置文件的行尾符号为 CRLF（适用于 Windows）。
files.simpleDialog.enabletrue启用简单对话框模式，替代默认的复杂对话框。
files.associations{ "pages.json": "jsonc", "manifest.json": "jsonc" }将 pages.json 和 manifest.json 文件关联为 jsonc 以支持注释。
files.exclude{ ... }隐藏指定的文件和目录，以保持工作区清洁。

5. ESLint 配置 (eslint 部分)

设置项值描述
eslint.useFlatConfigtrue启用新的 Flat Config ESLint 配置模式。
eslint.rules.customizations[ { "rule": "...", "severity": "off" }, ... ]关闭所有样式相关的 ESLint 规则，但仍允许自动修复。
eslint.validate[ "javascript", "typescript", ... ]配置 ESLint 验证的语言和文件类型，如 JavaScript、TypeScript、Vue 等。
  • 是的

6. 搜索和隐藏文件配置 (files.exclude 和 search.exclude 部分)

设置项值描述
files.exclude{ ... }隐藏工作区中的指定文件和目录，例如 .git、node_modules、package-lock.json 等。
search.exclude{ ... }在搜索时排除指定的文件和目录，例如 dist、public、node_modules、.git 等。

7.清爽界面

image-20240819011310743

image-20240819011500381

image-20240819011527004

  • 这部分就是 files.exclude中，在文件配置那

结尾

  • vscode设置中比较经常使用的应该就是编译器、搜索方位、自动保存、隐藏文件等几个项了

  • 有了ESLient自动校验格式和Prettier自动保存格式，至此前端的项目开发再无后顾之忧，开发效率大大提高，项目代码规范良好。

img

img

你好,我是Qiuner. 为帮助别人少走弯路而写博客

这是我的 github https://github.com/Qiuner ⭐️

​ gitee https://gitee.com/Qiuner 🌹

如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^)

想看更多 那就点个关注吧 我会尽力带来有趣的内容 😎

代码都在github或gitee上，可以去上面自行下载

如果你遇到了问题，自己没法解决，可以去我掘金评论区问。私信看不完，CSDN评论区可能会漏看 掘金账号 https://juejin.cn/user/1942157160101860 掘金账号

本人提供开发、代码讲解等服务。有意可点击文末微信号联系

更多专栏订阅:

  • 📊 一图读懂系列

  • 📝 一文读懂系列

  • ⚽ Uniapp

  • 🌟 持续更新

  • 🤩 Vue项目实战

  • 🚀 JavaWeb

  • 🎨 设计模式

  • 📡 计算机网络

  • 🎯 人生经验

  • 🔍 软件测试

掘金账号 CSDN账号

感谢订阅专栏 三连文章

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/403883.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV图像滤波(20)模糊处理函数stackBlur()的使用

OpenCV图像滤波(20)模糊处理函数stackBlur()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 stackBlur() 函数用于对图像进行模糊处理。该函数对图像应用了 stackBlur 技术。stackBlur 可以生成与高斯模糊相似的结果，而且随着模…
阅读更多...
C++ 左值引用与右值引用超详解

C++ 左值引用与右值引用超详解

目录 一 左值与右值 1.左值 2.右值 3.总结 二 左值引用与右值引用 1.左值引用 2.右值引用 3.总结与探究 3.1右值引用可以修改么？取地址么？ 3.2左值引用与右值引用转化 左值引用 引用 右值 右值引用 引用 左值 3.3左值引用与右值引用相同之处 3.4左值…
阅读更多...
栈与队列 - 逆波兰表达式求值

栈与队列 - 逆波兰表达式求值

150. 逆波兰表达式求值 方法一：栈 /*** param {string[]} tokens* return {number}*/ var evalRPN function(tokens) {const stack [];for (const token of tokens) {if (isNaN(Number(token))) { // 非数字const n2 stack.pop(); // 出栈两个数字const n1 s…
阅读更多...
【Unity开发】几种空值判断的性能测试

【Unity开发】几种空值判断的性能测试

【Unity开发】几种空值判断的性能测试） 项目优化过程中，一个非常细节的优化，就是在项目数据处理过程中，会用大量的null和“”空值的判断，参考了一些网友说的性能差别很大，是不是真的需要优化的问题&#xf…
阅读更多...
16：【stm32】I2C的使用一：I2C片上外设的使用

16：【stm32】I2C的使用一：I2C片上外设的使用

I2C 1、片上外设1.1：寄存器与内部结构 2、通过I2C向外发送数据2.1：I2C的初始化2.1.1：初始化SCL和SDA2.1.2：使能时钟PCLK1（APB1）2.1.3：配置I2C1的参数 2.2：发送数据2.2.1：…
阅读更多...
Ⅰ、基于 WebGPU 从 0 到 1 渲染 GLTF：第一个三角形

Ⅰ、基于 WebGPU 从 0 到 1 渲染 GLTF：第一个三角形

Ⅰ、基于 WebGPU 从 0 到 1 渲染 GLTF：第一个三角形 WebGPU 是一种面相网页的现代图形 API，由主要浏览器供应商开发。与 WebGL 相比，WebGPU 对 GPU 提供了更直接的控制，使应用程序能更有效地利用硬件，类似于 Vulkan 和…
阅读更多...
如何在C++ QT 程序中集成cef3浏览器组件去显示网页？

如何在C++ QT 程序中集成cef3浏览器组件去显示网页？

目录 1、问题描述 2、为什么选择cef3浏览器组件 3、cef3组件的介绍与下载 4、将cef3组件封装成sdk 5、如何使用cef3组件加载web页面 5.1、了解CefApp与CefClient 5.2、初始化与消息循环 5.3、如何创建浏览器 5.4、重载CefClient类 6、在qt客户端集成cef组件 7、最后…
阅读更多...
「12月·长沙」第三届传感、测量、通信和物联网技术国际会议（SMC-IoT 2024）

「12月·长沙」第三届传感、测量、通信和物联网技术国际会议（SMC-IoT 2024）

第三届传感、测量、通信和物联网技术国际会议（SMC-IoT 2024）将于2024年11月29日-2024年12月1日召开，由湖南涉外经济学院主办。会议中发表的文章将会被收录, 并于见刊后提交EI核心索引。 会议旨在围绕传感、测量、通信和物联网技术等相关研究…
阅读更多...
基于node.js的宠物寄存管理系统,基于express的宠物寄存系统

基于node.js的宠物寄存管理系统,基于express的宠物寄存系统

摘 要 伴随着社会以及科学技术的发展，互联网已经渗透在人们的身边，网络慢慢的变成了人们的生活必不可少的一部分，紧接着网络飞速的发展，系统管理这一名词已不陌生，越来越多的宠物店等机构都会定制一款属于自己个性化…
阅读更多...
DWA局部路径规划算法

DWA局部路径规划算法

DWA——Dynamic Window Approach动态窗口法 发展 动态窗口法是一种局部路径规划算法，起源于对移动机器人在复杂环境中实时避障的需求。该算法由F. D. Proentzen和O. Khatib提出，后经过不断优化，已成为移动机器人领域中的标准算法之一。 运…
阅读更多...
xss.function靶场(hard)

xss.function靶场(hard)

文章目录 WW3源码分析源码 DOMPpurify框架绕过覆盖变量notifyjs作用域和作用链域构建payload WW3 源码 <!-- Challenge --> <div><h4>Meme Code</h4><textarea class"form-control" id"meme-code" rows"4"><…
阅读更多...
Spring Boot实战：使用模板方法模式优化数据处理流程

Spring Boot实战：使用模板方法模式优化数据处理流程

概述 在软件开发过程中&#xff0c;我们经常需要处理各种各样的数据&#xff0c;这些数据可能来自不同的源&#xff0c;比如数据库、文件系统或者外部API等。尽管数据来源不同&#xff0c;但很多情况下处理这些数据的步骤是相似的&#xff1a;读取数据、清洗数据、转换数据格式…
阅读更多...
华为的流程管理

华为的流程管理

华为建设流程体系始于2000年&#xff0c;那时华为公司面临着快速扩张和全球化发展的挑战&#xff0c;意识到传统的管理模式已经无法满足业务发展的需求。为了提高公司的管理效率和竞争优势&#xff0c;华为决定启动流程体系的建设。在建设过程中&#xff0c;华为借鉴了业界最佳…
阅读更多...
云计算的三大服务模式：IaaS、PaaS、SaaS的深入解析

云计算的三大服务模式：IaaS、PaaS、SaaS的深入解析

在数字化转型的浪潮中&#xff0c;云计算以其独特的灵活性、可扩展性和成本效益&#xff0c;正逐渐成为企业IT架构的核心。云计算提供了三种主要的服务模式&#xff0c;分别是基础设施即服务&#xff08;IaaS&#xff09;、平台即服务&#xff08;PaaS&#xff09;和软件即服务…
阅读更多...
Spring发送邮件性能优化？如何集成发邮件？

Spring发送邮件性能优化？如何集成发邮件？

Spring发送邮件安全性探讨&#xff01;Spring发送邮件功能有哪些&#xff1f; 邮件发送的性能逐渐成为影响用户体验的重要因素之一。AokSend将探讨如何在Spring框架中进行Spring发送邮件的性能优化&#xff0c;确保系统能够高效、稳定地处理大量邮件请求。 Spring发送邮件&am…
阅读更多...
和鲸携手山东大学数字人文实验室，推动新文科与人工智能融合发展

和鲸携手山东大学数字人文实验室，推动新文科与人工智能融合发展

为深入推进产教融合与校企合作&#xff0c;推动人工智能在人文学科中的广泛应用与深入发展&#xff0c;8 月 15 日&#xff0c;山东大学数字人文实验室与和鲸科技 101 计划推进会暨新文科人工智能实验室标杆案例打造讨论会于威海顺利召开。山东大学数字人文实验室副主任陈建红、…
阅读更多...
12.2 使用prometheus-sdk向pushgateway打点

12.2 使用prometheus-sdk向pushgateway打点

本节重点介绍 : 使用golang sdk打prometheus4种指标&#xff0c;推送到pushgateway gauge、counter、histogram、summary的初始化4种类似的设置值的方法推送到pushgateway的方法 prometheus配置采集pushgateway&#xff0c;grafana上配大盘 golang-sdk 项目地址 https://git…
阅读更多...
系统架构设计师 - 软件工程(2)

系统架构设计师 - 软件工程(2)

软件工程 软件工程&#xff08;13-22分&#xff09;非常重要软件系统建模系统设计界面设计 ★★软件设计结构化设计 ★★面向对象设计 ★★★★★基本过程设计原则设计模式创建型模式&#xff1a;创建对象结构型模式&#xff1a;更大的结构行为型模式&#xff1a;交互及职责分配…
阅读更多...
科三预约考试，为什么我场次排名在前，后面排名又变了

科三预约考试，为什么我场次排名在前，后面排名又变了

什么时候知道是否预约成功 系统确认考试预约结果的时间一般为考试前5-7个工作日&#xff0c;同时根据预约人数系统会自行判断提前1-2日或延长1-2日公示预约结果&#xff0c;学员至少考试前三天会收到预约成功短信通知。 如果预约失败了怎么办&#xff1f;会计入考试次数吗&am…
阅读更多...
Java之线程篇一

Java之线程篇一

目录 如何理解进程&#xff1f; 进程和线程的区别 线程的优点 线程的缺点 线程异常 线程用途 创建线程 方法一&#xff1a;继承Thread类&#xff0c;重写run() 观察线程 小结 方法二&#xff1a; 实现Runnable接口&#xff0c;重写run() 方法三&#xff1a;继承Threa…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发