vue项目整合Eslint和stylelint规范代码

本文介绍了如何在Vue项目中整合Eslint、stylelint和Prettier,以实现代码风格统一和错误检查。通过安装相关依赖、配置规则和设置VSCode编辑器,确保代码在保存和提交时自动格式化和校验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言
最近在搭建项目框架,想着上一个项目代码风格各异,就想着在新项目中引入Eslint来规范团队成员代码风格,保持统一,也方便大家维护代码,减少不必要的错误。前端应用愈加复杂,代码规范问题必须通过强制的方式保持统一。以下是团队逐渐摸索出的一些配置,各取所需。

Eslint配置
在用vue-cli3搭建项目的过程中就会问你是否需要Eslint,选择就好来。如果没有选择后期又想加入eslint,可以手动安装Eslint的相关依赖。

安装
npm install eslint eslint-plugin-vue --save-dev
复制代码
需要注意:Node.js (>=6.14), npm version 3+。

创建Eslint配置文件
在项目根目录下新建一个文件,名.eslintrc.js。下面是个人的一些配置,可以自行参考。

module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
extends: [“eslint:recommended”, “plugin:vue/essential”, “@vue/prettier”],
rules: {
“generator-star-spacing”: “off”,
“no-console”: process.env.NODE_ENV === “production” ? “warn” : “off”,
“no-debugger”: process.env.NODE_ENV === “production” ? “warn” : “off”,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值