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.mzph.cn/bicheng/52481.shtml

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

相关文章

LabVIEW多显示器环境下主显示器识别与管理

LabVIEW多显示器环境下主显示器识别与管理

该程序使用 LabVIEW 图形化编程语言，涉及多显示器环境中主显示器的识别与信息提取。图像显示了两个不同的方法来获取主显示器的信息。 第一部分：方法一——基于显示器位置的主显示器识别 1. 当前监视器识别： 使用“FP.Monitor”属性节点获取…
阅读更多...
plsql表格怎么显示中文 plsql如何导入表格数据

plsql表格怎么显示中文 plsql如何导入表格数据

在Oracle数据库开发中，PL/SQL Developer是一款广泛使用的集成开发环境（IDE），它提供了丰富的功能来帮助开发人员高效地进行数据库开发和管理。在使用PL/SQL Developer时，许多用户会遇到表格显示中文的问题，以…
阅读更多...
ansible：

ansible：

ansible： 远程自动化运维 ansible是基于python开发的配置管理和应用部署工具。 也是自动化运维的重要工具。 可以批量配置，部署，管理上千台主机。 只需要在一台主机配置ansible就可以完成其他主机的操作。 操纵模式： 1、模…
阅读更多...
EmguCV学习笔记 VB.Net 6.4 霍夫变换

EmguCV学习笔记 VB.Net 6.4 霍夫变换

版权声明：本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…
阅读更多...
ArcGIS Pro基础：如何将数据和引用地图样式一起打包分享

ArcGIS Pro基础：如何将数据和引用地图样式一起打包分享

如上所示，有2个矢量图斑，一个是耕地地块，另一个是范围图斑，如果我们需要把此工程的所有数据以及引用地图一起分享给别人，就可以使用【打包工程】这个工具。 如上所示，在【地理处理】下输入【打包工程】&am…
阅读更多...
【C语言】常见文件操作

【C语言】常见文件操作

文件的常见操作 #include<stdio.h>// 由于devc代码编码为ANCI&#xff0c;故读取的文件中若有中文&#xff0c;请设置文件编码为ANCI&#xff0c;否则会乱码 // 读文件 void test1() {char ch;FILE *fp; // 创建文件指针fp fopen("./file.txt", "r"…
阅读更多...
数据结构系列-归并排序

数据结构系列-归并排序

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 归并排序 递归版本 首先&#xff0c;我们来看一下归并的示意图&#xff1a; 这是归并排序当中分解的过程。 然后便是两个两个进行排序&#xff0c;组合的过程。 归并完美的诠释…
阅读更多...
系统编程-管道

系统编程-管道

管道 目录 管道 1、管道的特点 2、无名管道的使用步骤 &#xff08;1&#xff09;在进程中使用 pipe 函数来获取管道的文件描述符 &#xff08;2&#xff09;使用 fork 函数来创建子进程 &#xff08;3&#xff09;通过获取到的文件描述符来进行数据的传输 &#xff08…
阅读更多...
[论文阅读] mobile aloha实验部分

[论文阅读] mobile aloha实验部分

DP:[1] CHI C, FENG S, DU Y, et al. Diffusion Policy: Visuomotor Policy Learning via Action Diffusion[J]. 2023. Diffusion Policy: Visuomotor Policy Learning via Action Diffusion精读笔记&#xff08;一&#xff09;-CSDN博客 哥伦比亚大学突破性的方法- Diffusio…
阅读更多...
【SpringBoot】11 多数据源（MyBatis：dynamic-datasource）

【SpringBoot】11 多数据源（MyBatis：dynamic-datasource）

介绍 多数据源&#xff1a;指的是一个单一应用程序中涉及了两个及以上的数据库&#xff0c;这种配置允许应用程序根据业务需求灵活地管理和操作不同的数据库。 需求 一个应用服务中&#xff0c;连接多个数据库&#xff0c;有本地的也有远程的&#xff0c;有MysQL、Oracle、P…
阅读更多...
PDPS软件 那智机器人 (丰田版)离线程序导出处理

PDPS软件 那智机器人 (丰田版)离线程序导出处理

在PDPS仿真软件中导出的那智机器人离线程序&#xff0c;一般是无法直接给TFD控制装置-那智机器人&#xff08;丰田式样版&#xff09;导入及识别使用。因此要对导出的程序进行转换编译处理&#xff0c;才能给TFD那智机器人&#xff08;丰田式样版&#xff09;导入离线程序。以下…
阅读更多...
react antd TreeSelect实现自定义标签

react antd TreeSelect实现自定义标签

<ProFormTreeSelectlabel"接收对象"name"receiverObjects"colProps{{ span: 16 }}labelCol{{span: 6,}}wrapperCol{{span: 18,}}rules{[{ required: true }]}fieldProps{{showSearch: true,multiple: true,// autoClearSearchValue: true,filterTreeNod…
阅读更多...
NASA:北极辐射-冰桥海冰实验（ARISE）2014年原地云数据产品

NASA:北极辐射-冰桥海冰实验（ARISE）2014年原地云数据产品

ARISE_Cloud_AircraftInSitu_C130_Data 简介 ARISE_Cloud_AircraftInSitu_C130_Data_1是北极辐射-冰桥海冰实验&#xff08;ARISE&#xff09;2014年原地云数据产品。该产品是位于华盛顿的美国宇航局科学任务局地球科学部辐射科学、冰冻层科学和机载科学计划共同努力的成果。…
阅读更多...
基于单片机的一氧化碳报警系统的设计与实现

基于单片机的一氧化碳报警系统的设计与实现

摘 要&#xff1a; 一氧化碳对人体有害&#xff0c;尤其超标时会影响人们的健康 。 因此文章设计了一款基于单片机的一氧化氮报警器设计。 论文通过传感器检测一氧化碳浓度&#xff0c;经过 AD 转换&#xff0c;再把检测信号传递给单片机&#xff0c;经过分析处理&#xff0c…
阅读更多...
论文辅助笔记：Large Language Models are Zero-Shot Next LocationPredictors

论文辅助笔记：Large Language Models are Zero-Shot Next LocationPredictors

论文理论部分&#xff1a;论文笔记&#xff1a;lunLarge Language Models are Zero-Shot Next LocationPredictors-CSDN博客 2 Data 2.1 Dataset类 2.2 下载文件 2.3 get_dataset 2.4 get_trajectories trajectory_split暂时略去 # save the test dictionary and the true l…
阅读更多...
redis核心数据结构源码分析

redis核心数据结构源码分析

dictEntry和redisObject 在 Redis 的实现中&#xff0c;当一个键值对被创建并存储时&#xff0c;键通常是一个字符串&#xff0c;而值则是一个 redisObject。因此&#xff0c;在 dictEntry 结构中&#xff0c;key 成员指向的是一个字符串&#xff0c;而 v.val 成员则指向一个 …
阅读更多...
45.5【C语言】typedef

45.5【C语言】typedef

目录&#xff1a; *全称 *格式 一般指针 数组指针 函数指针 *细节 *全称 type define 类型&#xff08;重新&#xff09;定义&#xff08;或命名&#xff09;&#xff0c;可简化输入 *格式 1.非指针类型: typedef 类型 简化名称 typedef signed long long k; signed long …
阅读更多...
搭建自己的金融数据源和量化分析平台（七）：定时更新上市公司所属行业门类及大类

搭建自己的金融数据源和量化分析平台（七）：定时更新上市公司所属行业门类及大类

0x00 前言 由于此前从深交所下载的股票信息中只有行业门类信息&#xff0c;没有行业大类信息&#xff0c;导致后续解析三大报表和量化选股的时候无法进行&#xff1a; 可以看到深交所的股票是没有大类信息的。 再看看上交所的保险股&#xff1a; 因此需要将深交所股票的所属…
阅读更多...
WIFI驱动开发

WIFI驱动开发

Linux 4.9 内核驱动移植 Linux 4.9 BSP 内核驱动 下载驱动后获得驱动的 tar.gz 压缩包 解压后找到如下驱动与文件夹 进入内核&#xff0c;找到 linux-4.9/drivers/net/wireless 文件夹中&#xff0c;新建文件夹aic8800 并且把上面的驱动与文件夹放入刚刚创建好的 aic8800 中。…
阅读更多...
【MySQL】 黑马 MySQL进阶 笔记

【MySQL】 黑马 MySQL进阶 笔记

文章目录 存储引擎MySQL的体系结构存储引擎概念存储引擎特点InnoDBMyISAMMemory 存储引擎选择 索引概述结构B Tree(多路平衡查找树)B TreeHash为什么InnoDB存储引擎选择使用Btree索引结构? 分类思考题 语法SQL性能分析&#xff08;索引相关&#xff09;SQL执行频率慢查询日志p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023