[JavaScript知识库]项目配置Prettier

1、下载依赖

// npm
npm install --save-dev --save-exact prettier
//yarn
yarn add --dev --exact prettier

2、配置文件

在根目录下创建.prettierrc.js配置文件及.prettierignore忽略文件

3、文件配置

.prettierrc.js文件中

module.exports = {
  printWidth: 800, //单行长度
  tabWidth: 2, //缩进长度
  useTabs: false, //使用空格代替tab缩进
  semi: true, //句末使用分号
  singleQuote: true, //使用单引号
  quoteProps: 'as-needed', //仅在必需时为对象的key添加引号
  jsxSingleQuote: true, // jsx中使用单引号
  trailingComma: 'all', //多行时尽可能打印尾随逗号
  bracketSpacing: true, //在对象前后添加空格
  jsxBracketSameLine: true, //多属性html标签的‘>’折行放置
  arrowParens: 'always', //单参数箭头函数参数周围使用圆括号
  requirePragma: false, //无需顶部注释即可格式化
  insertPragma: false, //在已被preitter格式化的文件顶部加上标注
  htmlWhitespaceSensitivity: 'ignore', //对HTML全局空白不敏感
  vueIndentScriptAndStyle: false, //不对vue中的script及style标签缩进
  endOfLine: 'lf', //结束行形式
  embeddedLanguageFormatting: 'auto', //对引用代码进行格式化
  'prettier.proseWrap': 'preserve', // 是否要换行
  'vetur.format.defaultFormatter.js': 'prettier', // vetur 使用 prettier格式化代码
};

.prettierignore文件中

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

4、格式化文档

格式化全部文档

// npm
npx prettier --write .
// yarn
yarn prettier --write .

格式化指定文档

// npm
npx prettier --write .\src\views\test\test.vue
// yarn
yarn prettier --write .\src\views\test\test.vue

检查文档是否已格式化

// npm
npx prettier --check .
// yarn
yarn prettier --check .

检查指定文档是否已格式化

// npm
npx prettier --check .\src\views\test\test.vue
// yarn
yarn prettier --check .\src\views\test\test.vue

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖