ESLint + Prettier

ESLint

介绍

小试牛刀

  1. 新建一个文件夹
  2. 在终端执行 npm init 创建 package.json
  3. 安装eslint npm install --save-dev eslint@8(注意版本,版本太高可能报错)
  4. 创建eslint.config.js(这个是eslint的配置文件),代码如下
js 复制代码
// eslint.config.js
module.exports = [
    {
        rules: {
            "no-unused-vars": "warn",
            "no-undef": "warn"
        }
    }
];
  1. 创建一个js文件,代码如下
js 复制代码
var data = '666'

这里data创建了,但是未使用,会报警告

  1. 在终端执行创建的js文件。让ESLint检查js文件中的代码
    npx eslint test.js

上图可以看出,终端输出了当前的一个警告。data创建了但是没有使用。 7. ESLint规则配置。在eslint.config.js中有一个rules对象,可以在里面配置规则。也可以对现在的规则做出更改。"no-unused-vars": "off",

"off":关闭规则,不检查未使用的变量。

"warn":开启规则,将未使用的变量视为警告,不会导致构建失败。

"error":开启规则,将未使用的变量视为错误,会导致构建失败。

配合VS Code中使用ESLint扩展插件

上面的例子中,只能在终端执行才能看到结果。开发过程中非常麻烦。ESLint扩展插件,可以实时校验,直接提示代码不规范的地方。

VS Code安装ESLint扩展插件

VS Code设置中配置ESLint开启

重新打开我们的js文件,就能看到一个提示(无效就重新打开VS Code)

悬浮到提示的效果

这里的提示就是我们在配置文件里面定义的规则

VS Code里完成保存自动修复ESLint规则报警

上面我们配置了ESLint是否作为格式化工具。同理,我们需要在设置的settings.json文件里面加上一行

js 复制代码
{
    "eslint.format.enable": true, // 开启eslint
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // 保存时,启动eslint修复
    }
}

回到js文件,定义一个规则,只允许单引号,当我们再次保存时,就会自动修复了。

Prettier

小试牛刀

  1. 创建文件夹,创建 package.json(不会参考上面)
  2. 安装Prettiernpm install --save-dev --save-exact prettier(--save-exact准确安装版本)
  3. 新建Prettier规则文件 .prettierrc.js 内容如下
js 复制代码
module.exports = {
  singleQuote: true, //使用单引号
};
  1. 新建测试js文件
js 复制代码
var data = "5555";

故意书写了一个双引号

  1. 在终端运行npx prettier test.js,输入结果如下:

可以看到输出的结果没有双引号了。

VS Code + Prettier 完成保存自动修复

在VS Code的设置中的settings.json中,添加下面两行json代码

js 复制代码
{
  "editor.formatOnSave": true, // 开启保存自动格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 设置prettier为默认格式化工具
}

重新打开刚才的js文件,保存就会自动修复了。

ESLint和Prettier两者的职能

ESLint和Prettier都是用于JavaScript代码风格检查和格式化的工具,但它们的功能略有不同。

ESLint是一个静态代码分析工具,它可以检查代码中的语法错误、潜在的错误、代码风格和安全问题等。ESLint可以通过配置文件来定义规则,以便在代码提交之前自动检查代码。

Prettier是一个代码格式化工具,它可以自动格式化代码,使其符合一致的风格。Prettier可以格式化JavaScript、CSS、HTML等代码,并且可以与ESLint集成使用。

虽然ESLint和Prettier都可以用于代码风格检查和格式化,但它们的目的略有不同。ESLint主要用于检查代码质量和安全问题,而Prettier主要用于确保代码风格的一致性。
简而言之

ESLint检查代码的语法,比如不能使用var,禁止使用console语句,禁止使用未定义的变量等

Prettier检查代码风格,比如不能使用双引号,代码前面留几个空格,代码结尾不要分号等

相关推荐
雲墨款哥几秒前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02344 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder9 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder10 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep17 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛22 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i31 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟35 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览39 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少41 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos