vue-ESlint代码规范及修复-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue-ESlint代码规范及修复。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. 介绍

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

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

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

2. 手动修正

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

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

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

如下图：
vue-ESlint代码规范及修复,Vue,vue.js,代码规范,前端

3. 自动修正

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

eslint会自动高亮错误显示

通过配置，eslint会自动帮助我们修复错误

3.1 安装eslint

vue-ESlint代码规范及修复,Vue,vue.js,代码规范,前端

3.2 在vs中添加配置

设置：
vue-ESlint代码规范及修复,Vue,vue.js,代码规范,前端

添加配置如下：

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

注意：eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目
注意：使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify

settings.json 参考文章来源地址https://www.toymoban.com/news/detail-800121.html

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}