TNotes.html-css-js

Appearance

to top

0113. 学习 prettier 基本配置字段的书写 ​

1. 📒 认识一些常见的基本配置字段 ​

  • singleQuote 默认值是 false，表示格式化后默认使用的是双引号。如果你想要使用单引号，可以将 singleQuote 设置为 true。
  • semi 默认值为 true，表示格式化之后，语句结尾会自动加上分号。如果你想要让代码看起来更简洁一些，想要把语句结尾的分号给去掉，可以将 semi 配置给手动设置为 false。
  • tabWidth 配置缩进长度。

2. 💻 demos.1 - singleQuote - 使用单引号 ​

json
{
  "singleQuote": true
}
js
console.log("semi singleQuote");
js
console.log('semi singleQuote');

3. 💻 demos.2 - semi - 配置 js 语句结尾是否加分号 ​

json
{
    "semi": true
}
js
console.log('semi test')
js
console.log("semi test");
  • 如果将 semi 配置为 false，格式化之后的效果如下：
js
console.log("semi test")

4. 💻 demos.3 - 缩进配置 tabWidth ​

json
{
    "tabWidth": 2
}
js
function sum(a,b){
return a+b;
}
js
function sum(a, b) {
  return a + b;
}

5. 📒 将 prettier 配置的书写位置 ​

  • 除了写在 .prettierrc 文件中，还可以写到项目根目录中的 .vscode/settings.json 文件中。

6. 💻 demos.4 - 将 prettier 配置写到项目根目录中的 .vscode/settings.json 文件中 ​

json
{
  "prettier.singleQuote": true,
  "prettier.semi": false
}
js
console.log("test .vscode/settings.json");
js
console.log('test .vscode/settings.json')