如果设置.prettierrc文件 @vue/prettier还有用吗

时间: 2023-04-03 17:05:28 浏览: 241

详解如何在vue项目中使用eslint+prettier格式化代码

在前端开发中，保持代码风格的一致性是至关重要的，它能提高代码可读性和团队协作效率。本文将详细讲解如何在Vue项目中集成`eslint`和`prettier`，以实现代码的自动格式化和规范检查。 `eslint`是一款强大的静态代码分析工具，它可以检查代码中的错误、潜在问题，并且支持自定义规则来符合特定的编码风格。而`prettier`则是一款代码格式化工具，它能够自动按照预设的规则对代码进行美化，包括括号、引号、缩进等细节，使得代码风格统一。确保你的项目已经安装了`vue-cli`，因为这通常是创建Vue项目的标准方式。接下来，你需要在项目中安装`eslint`、`prettier`以及它们的集成插件： ```bash npm install --save-dev eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier prettier ``` 安装完成后，你需要配置`.eslintrc.js`文件。在`plugins`部分添加`['vue', 'prettier']`，在`extends`部分添加`['plugin:vue/essential', 'eslint:recommended']`，以启用Vue插件和基本的ESLint推荐规则。同时，你可能还需要在`rules`部分添加针对Prettier的规则，以避免与ESLint的冲突。 ```javascript module.exports = { plugins: ['vue', 'prettier'], extends: ['plugin:vue/essential', 'eslint:recommended'], rules: { // 关闭与Prettier冲突的ESLint规则 'prettier/prettier': 'error', }, }; ``` 为了使用Prettier，你需要在`.prettierrc`或`.prettierrc.js`中设置你的代码风格偏好，如单引号、换行符等。例如： ```json { "singleQuote": true, "trailingComma": "all", "printWidth": 120, "tabWidth": 2, "useTabs": false, "semi": true, "bracketSpacing": true, "jsxBracketSameLine": true } ``` 在VSCode这样的编辑器中，安装`Eslint`、`Vetur`和`Prettier - Code formatter`插件。在`settings.json`中配置以下内容，以便在保存时自动格式化代码和应用ESLint修复： ```json { "editor.formatOnSave": true, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "force-aligned" } }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "vue", "html", "jsx", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ] } ``` 在`package.json`的`scripts`部分，添加`lint`脚本，以在运行`npm run lint`时自动修复可修复的ESLint错误： ```json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --fix --ext .js,.vue src", "build": "node build/build.js" } ``` 现在，每当保存Vue文件时，Prettier会自动格式化代码，而运行`npm run lint`则会自动修复一些可以通过ESLint解决的问题。如果项目遵循`standard`或`airbnb`等特定风格指南，你可能需要进一步调整配置，以确保`eslint-plugin-prettier`和`eslint-config-prettier`正确地与这些风格指南协同工作。通过集成`eslint`和`prettier`，你可以为Vue项目创建一个强大的代码质量保障体系，确保代码风格一致，减少人为错误，并提高代码审查的效率。这不仅可以提升团队合作的体验，还能让代码库更加整洁和易于维护。

可以用，.prettierrc 文件可以用来配置 Prettier 的规则，而 @vue/prettier 是一个预设，可以帮助我们快速配置 Prettier 的规则，使其符合 Vue.js 的风格指南。

阅读全文

如果设置.prettierrc文件 @vue/prettier还有用吗

相关推荐

实例详解Vue项目使用eslint + prettier规范代码风格

NodeJS以及@vue/cli的安装

适合于javascript/html/css/vue/react编程的 vscode 的优秀扩展推荐和 vscode 的推荐设置

vscode 使用Prettier插件格式化配置使用代码详解

Vue搭建的前端博客项目，请看资源描述

Element Plus 1.0.1-beta.23版本发布 - Vue.js 3 UI库

使用Vue.js实现随机头像生成器

Vue 3.3.0-alpha.7 更新及安全指南

Vue.js 3 UI库element-plus版本更新

Vue.js 3 UI库element-plus版本2.5.1发布

Vue.js 3 UI库Element Plus 1.0.2版本特性解析

Vue 3.2.0 Beta.1 版本特性与开发工具整合介绍

Vue 3.2.20 源码分析与配置解析

Vue 2.7.15源码深度解析与应用实例

探索ant-design-mobile 5.0.0-beta.18构建极致移动端Web体验

Vue CLI 3中的组件化开发技巧与最佳实践

基于JAVA+SpringBoot+MySQL的校园台球厅人员与设备管理系统设计与实现.docx

基于Matlab的CNN神经网络算法实现MNIST手写字体识别项目源码+文档说明（毕业设计）

(完整数据)全国各省、地级市城镇登记失业率面板数据

最新推荐

webpack构建vue项目的详细教程（配置篇）

基于JAVA+SpringBoot+MySQL的校园台球厅人员与设备管理系统设计与实现.docx

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"

PROTEUS符号定制指南：个性化元件创建与修改的全面攻略

https://www.lagou.com/wn/爬取该网页职位名称，薪资待遇，学历，企业类型，工作地点数据保存为CSV文件的python代码