实例详解Vue项目使用eslint+prettier规范代码风格_vue3项目eslint@9.0.0 - CSDN文库

39 浏览量更新于2023-05-11 评论收藏 80KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了Vue项目使用eslint + prettier规范代码风格,本文通过实例代码给大家介绍的非常详细，需要的朋友可

以参考下

团队开发的项目，如果没有对代码风格作要求，有多少团队成员，就当然会出现多少种不同的代码风格。因此，我们需要一种

能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格。

幸好，我们有 eslint 和 prettier 。

eslint VS prettier

应该大多数项目都已经采用eslint来对代码进行质量检查，可能少部分还会采用其进行一定程度上的统一风格。那为什么还需

要prettier呢？我们先来对它们作一个简单的了解。

各种各种linters

总体来说，linters有两种能力：

1. 检查代码质量，比如是否有已定义但未使用的变量，或者使用函数式编程的函数是否产生副作用等。

2. 检查代码风格，比如每行的最大长度，或者是否使用拖尾逗号等。

其中，eslint文档中，带扳手图标的规则就是eslint能够自动修复的规则。而不带该图标的规则，eslint则只能给出错误或警告，

随后由开发者人工修复。

prettier

pretter没有对代码的质量进行检查的能力，其只会对代码风格按照指定的规范进行统一，避免一个项目中出现多种不同的代码

风格。

项目配置项目配置

此处使用vue项目作为例子

一、首先配置一、首先配置eslint

如果大家的项目是使用vue cli生成的，并且选择使用eslint的话，那么默认在项目根目录下就会生成.eslintrc.js。如果没有，也

可以在项目根目录下创建该文件以及.eslintignore文件

此处我使用eslint-plugin-vue，选择的是vue/strongly-recommended规则。

npm install --save-dev eslint eslint-plugin-vue@next

// .eslintrc.js

extends: {

'plugin:vue/strongly-recommended'

}

// .eslintignore

/build/

/config/

/dist/

/*.js

/test/unit/coverage/

如果希望在重新编译的时候eslint自动修复代码，需要在webpack配置中加入eslint，并且设置 fix: true ，并且在devserver中开

启eslint。

// config/index.js

module.exports = {

dev: {

useEslint: true,

}

}

// webpack.base.conf.js

const createLintingRule = () => ({

test: /\.(js|vue)$/,

loader: 'eslint-loader',

enforce: 'pre',

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38701952

粉丝: 5
资源: 977

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈