Prettier - Code formatter插件使用(前端美化插件)

ops/2024/11/14 13:48:12/

一,安装

vscode直接搜索

安装完毕后

二,配置 Prettier

  • 安装完插件后,打开 VSCode 的设置(快捷键是 Ctrl + ,)。
  • 在搜索框中输入 Format On Save,找到并勾选“Editor: Format On Save”选项,这样每次保存时,Prettier 会自动格式化代码。
  • 继续在设置搜索框中输入 Default Formatter,然后将“Editor: Default Formatter”设置为 Prettier,确保 Prettier 是默认的格式化工具。

三 ,详细配置

在你的项目目录里面创建一个叫.prettierrc的文件,注意!!后缀前面什么名字也不要有。

把.prettierrc放到项目里面,而且要注意,如果你放入项目里面,你有一个js文件的层级比.prettierrc层级高,它是不生效的,所以要放到项目的根目录里面。

常用的配置

{"semi": false,"singleQuote": true,"tabWidth": 4,"useTabs": false,"trailingComma": "all","bracketSpacing": false,"arrowParens": "avoid","endOfLine": "lf"
}

第1个,semi - 是否在每行末尾加分号

第2个,singleQuote - 是否使用单引号代替双引号

第3个,tabWidth - 指定缩进的空格数。

第4个,useTabs - 是否使用 tab 缩进而不是空格。(建议优先使用tab缩进 而不是空格)

第5个,trailingComma - 多行结构中是否在末尾添加逗号。

它有"none" , "es5"  ,"all"这些值(*)

例如,"none":不在最后一项后面添加逗号。

const user = {name: "Alice",age: 25
};
const numbers = [1, 2, 3];

"es5":在符合 ES5 标准的结构中添加逗号,比如对象和数组。函数参数等不添加逗号。

const user = {name: "Alice",age: 25,
};
const numbers = [1, 2, 3];

"all":在所有多行结构的最后一项后面都加逗号,包括函数参数

const user = {name: "Alice",age: 25,
};function greet(name, age,) {console.log(`Hello, ${name}. You are ${age} years old.`);
}

第6个,brackegetSpacing - 对象大括号 {} 内是否保留空格。

第7个,arrowParens - 箭头函数参数是否总是加括号。

第8个endOfLine - 指定换行符样式

值有"lf" , "crlf" , "cr" ,"auto"


http://www.ppmy.cn/ops/133581.html

相关文章

11. 盛最多水的容器

目录 题目过程 题目 过程 class Solution { public:int maxArea(vector<int>& height) {int l0,rheight.size()-1;int v0;//用于存储容器最大值while(l<r){if(height[l]<height[r]){vmax(v,height[l]*(r-l));}else{vmax(v,height[r]*(r-l));}}return v;} };用…

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战

目录 前言 一、原始的处理办法 1、使用Set方法来转换 2、使用构造方法转换 二、基于ModelMapper的动态转换 1、ModelMapper简介 2、集成到项目中 3、Shapefile属性读取 三、总结 前言 在现代软件开发中&#xff0c;尤其是在多层架构中&#xff0c;经常需要将数据从一个…

React第一个项目

运行效果&#xff1a; 知识讲解&#xff1a; 组件&#xff1a;先定义后使用&#xff0c;用户界面的构成要素&#xff08;标签、css和JavaScript&#xff09; 定义组件&#xff1a; 导出组件&#xff1a;export default 前缀是JavaScript标准语法 定义函数&#xff1a;function …

《基于Oracle的SQL优化》读书笔记

查看执行计划set autotrace traceonly explain在当前session中将优化器模式改为RULE。alter session set optimizer_modeRULE;统计信息存储在oracle的数据字典里&#xff0c;且从多个维度描述了oracle数据库里相关对象的实际数据量&#xff0c;实际数据分布等详细信息。 -- 对…

elementUI input 禁止内容两端存在空格,或者是自动去除两端空格

需求 项目中有需求&#xff1a;输入框中禁止内容两端存在空格&#xff0c;或者是自动去除两端空格。 解决方法 vue的api文档中有过介绍&#xff0c;使用.trim可以去掉用户输入内容中两端的空格&#xff0c;如下图 代码 <el-input v-model.trim"name" cleara…

基于标签相关性的多标签学习

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

lua入门教程 :模块和包

Lua中的模块和包是组织和重用代码的重要工具。以下是对Lua模块和包的详细教程&#xff1a; 一、模块的定义 Lua的模块是由变量、函数等已知元素组成的table&#xff0c;可以看作是一个封装库。从Lua5.1开始&#xff0c;Lua加入了标准的模块管理机制&#xff0c;允许把一些公用…

执行npm run build -- --report后,生产report.html文件是什么?

‌ 执行npm run build -- --report后&#xff0c;生成的report.html文件是一个打包分析报告&#xff0c;它详细记录了项目的打包结果和各个文件的大小信息。‌ 这个报告文件通常包含以下内容&#xff1a; ‌文件大小信息‌&#xff1a;报告会列出项目中每个文件的大小&#…