<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>代码规范工程化 on Last Stand</title><link>https://amatsuzero.github.io/LastStand/tags/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83%E5%B7%A5%E7%A8%8B%E5%8C%96/</link><description>Recent content in 代码规范工程化 on Last Stand</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Thu, 23 Oct 2025 00:00:00 +0800</lastBuildDate><atom:link href="https://amatsuzero.github.io/LastStand/tags/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83%E5%B7%A5%E7%A8%8B%E5%8C%96/index.xml" rel="self" type="application/rss+xml"/><item><title>代码规范工程化</title><link>https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-006/</link><pubDate>Thu, 07 Aug 2025 00:00:00 +0800</pubDate><guid>https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-006/</guid><description>&lt;p&gt;规范化是前端工程化的一个重要部分。现在，有许多工具能够辅助我们实行代码的规范化,比如你一定知道的 ESLint 和 Prettier。&lt;/p&gt;
&lt;p&gt;今天，来聊聊这些工具的工作原理和基本使用，了解它们是如何发挥作用的，以及如何更好地利用这些工具去规范项目的代码。&lt;/p&gt;
&lt;h2 id="1-eslint---检查你的-javascript-代码"&gt;1. ESlint - 检查你的 JavaScript 代码&lt;/h2&gt;
&lt;p&gt;让我们先从知名度最高的 ESLint 开始。&lt;/p&gt;
&lt;h3 id="11-eslint-及其作用"&gt;1.1. ESLint 及其作用&lt;/h3&gt;
&lt;p&gt;Lint 是一类专门用于检查代码的工具软件， 也称 linter。ESLint ，即 JavaScript （ECMAScript）代码的检查工具。&lt;/p&gt;
&lt;p&gt;正如官网的介绍 —— “Find and fix problems in your JavaScript code”，ESLint 能够辅助查找出你的 JavaScript 代码中的问题，包括：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;代码风格问题（styles）。比如，运算符两边的空格、语句末尾的分号。&lt;/li&gt;
&lt;li&gt;不好的写法。比如，使用 &lt;code&gt;==&lt;/code&gt; 进行比较而不是 &lt;code&gt;===&lt;/code&gt;。&lt;/li&gt;
&lt;li&gt;可能存在逻辑问题的代码模式。比如，定义了一个变量，但没有使用到它。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;此外，ESLint 还能够帮你自动修复一些简单的问题。&lt;/p&gt;
&lt;p&gt;我们将在下一小结学习如何使用 ESLint 检查我们的 JavaScript 代码，并修复其中的一些问题。&lt;/p&gt;
&lt;h3 id="12-eslint-快速上手"&gt;1.2. ESLint 快速上手&lt;/h3&gt;
&lt;p&gt;为了在项目中使用 ESLint，需要先安装它。&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"&gt;&lt;code class="language-fallback" data-lang="fallback"&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;# 初始化一个 npm 项目
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;mkdir eslint-test
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;cd eslint-test
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;npm init -y
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;# 安装 eslint
&lt;/span&gt;&lt;/span&gt;&lt;span style="display:flex;"&gt;&lt;span&gt;npm init @eslint/config
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;回答一系列问题后，你可以看目录中的配置文件 &lt;code&gt;.eslintrc.js&lt;/code&gt;，这个配置文件告诉 ESLint 如何去解析项目，这个项目采用了哪些规范和规则。&lt;/p&gt;</description></item></channel></rss>