vue-ESlint代码规范及修复

1. 介绍

ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。

在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则。

规范网址:https://standardjs.com/rules-zhcn.html

2. 手动修正

根据错误提示来一项一项手动修正。

如果你不认识命令行中的语法报错是什么意思,你可以根据错误代码(func-call-spacing, space-in-parens,...)去 ESLint 规则列表中查找其具体含义。

打开 ESLint 规则表,使用页面搜索(Ctrl + F)这个代码,查找对该规则的一个释义。

如下图:

3. 自动修正

通过eslint插件 - 实现自动修正

  1. eslint会自动高亮错误显示
  2. 通过配置,eslint会自动帮助我们修复错误

3.1 安装eslint

3.2 在vs中添加配置

设置:

添加配置如下:

js 复制代码
// 当保存的时候,eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码,不自动格式化
"editor.formatOnSave": false
  • 注意:eslint的配置文件必须在根目录下,这个插件才能才能生效。打开项目必须以根目录打开,一次打开一个项目
  • 注意:使用了eslint校验之后,把vscode带的那些格式化工具全禁用了 Beatify

settings.json 参考

js 复制代码
{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候,eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码,不自动格式化
    "editor.formatOnSave": false
}
相关推荐
大猫会长11 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_11 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js
snakeshe101013 分钟前
深入理解useState:批量更新与非函数参数支持
前端
windliang14 分钟前
Cursor 排查 eslint 问题全过程记录
前端·cursor
boleixiongdi14 分钟前
# Bsin-App Uni:面向未来的跨端开发框架深度解析
前端
G等你下课18 分钟前
AJAX请求跨域问题
前端·javascript·http
前端西瓜哥18 分钟前
pixijs 的填充渲染错误,如何处理?
前端
阑梦清川19 分钟前
Java后端项目前端基础Vue(二)
vue.js
snakeshe101019 分钟前
6-1. 实现 useState
前端
呆呆没有脑袋21 分钟前
深入浅出 JavaScript 闭包:从核心概念到框架实践
前端