prettier保存代码时自动格式化

  1. 打开vscode 在商店中搜索 prettier 并安装
    在这里插入图片描述
  2. 打开 设置
    在这里插入图片描述
  3. 搜索 Format 并勾选 Format On Save
    在这里插入图片描述
  4. 设置 窗口失去焦点自动保存并格式化
    在这里插入图片描述
  5. 设置默认格式化程序
    任意打开一个js文件单击右键调出菜单选择使用...格式化文档
    在这里插入图片描述
    选择 配置默认格式化程序在这里插入图片描述
    选择 prettier
    在这里插入图片描述
  6. 本地安装 Prettier
    在每个项目中本地安装Prettier很重要,每个项目都会获得正确的 Prettier 版本支持。
    // npm 
    npm install --save-dev --save-exact prettier
    // yarn 
    yarn add --dev --exact prettier
    
  7. 项目根目录添加 prettier 配置文件
    在这里插入图片描述
    {
      "semi": true,
      "singleQuote": false,
      "arrowParens": "always",
      "trailingComma": "all"
    }
    
  8. 配置忽略文件
    在这里插入图片描述
    # 忽略的文件夹:
    build/
    coverage/
    .vscode/
    docker/
    node_modules/
    
    # 忽略的文件
    *.html
    *.js
    

配置完成,更改文件试试吧

  • 7
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在 Vue 项目中,可以使用 ESLint 和 Prettier 进行代码规范和格式化。其中,ESLint 负责检查代码是否符合规范,而 Prettier 则负责格式化代码。 首先,需要在项目中安装 ESLint 和 Prettier: ``` npm install eslint prettier --save-dev ``` 然后,在项目根目录下创建 `.eslintrc.js` 文件,并添加如下配置: ```javascript module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/essential', 'eslint:recommended', '@vue/prettier', ], parserOptions: { parser: 'babel-eslint', }, rules: { 'prettier/prettier': 'error', 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', }, }; ``` 这里使用了 `@vue/prettier` 插件来集成 Prettier 的规则。同,将 `prettier/prettier` 规则设置为 `error`,表示如果代码不符合 Prettier 的格式,就会报错。 最后,在 `package.json` 文件中添加如下脚本: ```json { "scripts": { "lint": "eslint --fix src", "prettier": "prettier --write \"src/**/*.{js,vue}\"" } } ``` 其中,`lint` 脚本用于检查代码是否符合规范,并自动修复一些简单的错误。`prettier` 脚本用于格式化代码。这里的 `src/**/*.{js,vue}` 表示对 `src` 目录下所有的 `.js` 和 `.vue` 文件进行格式化。 现在,在命令行中运行 `npm run prettier` 命令,即可自动格式化项目中的代码。如果想要在保存文件自动格式化代码,可以使用编辑器插件,如 VS Code 中的 `ESLint` 和 `Prettier - Code formatter` 插件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Gleason.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值