在NuxtJS项目中使用.prettierrc工具格式化代码

Prettier：Options · Prettier

安装插件

在vscode拓展找到Prettier-Code formatter插件，并对它进行安装。

安装依赖

在vscode中输入一下命令进行安装。

#npm
npm install --save-dev --save-exact prettier

#yarn
yarn add --dev --exact prettier

#pnpm
pnpm add --save-dev --save-exact prettier

创建配置文件

分别创建  代码格式化配置  、代码格式化忽略  文件

#在根目录下创建 .prettierrc 文件
node --eval "fs.writeFileSync('.prettierrc','{}\n')"

#在根目录下创建 .prettierignore 文件
node --eval "fs.writeFileSync('.prettierignore','{}\n')"

.prettierrc

json文件不可使用注释 ，如// ， /**/ ， #。编写格式采用官方指定的API形式。

{
  "tabWidth": 2,
  "semi": false
}

TabWidth

指定每个缩进级别的空格数。

Default	CLI Override	API Override
2	--tab-width <int>	tabWidth: <int>

Semicolons

在语句末尾打印分号。

有效选项：

true -在每个语句的末尾添加分号。
false -仅在可能引入ASI故障的行开头添加分号。

Default	CLI Override	API Override
true	--no-semi	semi: <bool>

.prettierignore

对文件夹和文件做了忽略格式化操作。

# Ignore artifacts:
**/node_modules
.nuxt
assets/icons/*
assets/fonts/*
public/**/*

# Ignore all HTML files:
**/*.md
**/*.html

配置Prettier为代码的默认格式化工具

1、快捷键： ctrl + shift + p

2、选择  使用...格式化文档

3、选择：Prettier - Code formatter

配置文件保存时自动格式化

1、打开设置

2、输入 format on save

3、勾选 Format On Save

验证生效

在.prettierrc文件中，将tabWidth改成6；然后对app.vue进行保存操作就自动格式化了。

以上就是Prettier与VSCode的配置及简单使用。