-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
149 lines (77 loc) · 31.7 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Endy</title>
<subtitle>关于技术，关于生活</subtitle>
<link href="http://blog.viewing.top/atom.xml" rel="self"/>
<link href="http://blog.viewing.top/"/>
<updated>2022-04-06T03:18:56.271Z</updated>
<id>http://blog.viewing.top/</id>
<author>
<name>Endy</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>Error: ENFILE: file table overflow</title>
<link href="http://blog.viewing.top/2022/04/06/Error-ENFILE-file-table-overflow/"/>
<id>http://blog.viewing.top/2022/04/06/Error-ENFILE-file-table-overflow/</id>
<published>2022-04-06T03:09:09.000Z</published>
<updated>2022-04-06T03:18:56.271Z</updated>
<content type="html"><![CDATA[<p>在<code>MacOs 10.15.3</code> 上面尝试启动一个 <code>umi server</code> 错误如下<br><img src='/images/overflow.png'></p><h1 id="原因"><a href="#原因" class="headerlink" title="原因"></a>原因</h1><p> <code>这可能是由于 mac 上文件打开文件的限制。默认情况下，它设置为低。您将需要增加默认大小</code></p><h1 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">echo</span> kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf</span><br><span class="line"><span class="built_in">echo</span> kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf</span><br><span class="line">sudo sysctl -w kern.maxfiles=65536</span><br><span class="line">sudo sysctl -w kern.maxfilesperproc=65536</span><br><span class="line"><span class="built_in">ulimit</span> -n 65536</span><br></pre></td></tr></table></figure><p>输入以上命令 问题解决</p>]]></content>
<summary type="html"><p>在<code>MacOs 10.15.3</code> 上面尝试启动一个 <code>umi server</code> 错误如下<br><img src='/images/overflow.png'></p>
<h1 id="原因"><a href="#原因" class</summary>
<category term="Error: ENFILE: file table overflow" scheme="http://blog.viewing.top/tags/Error-ENFILE-file-table-overflow/"/>
<category term="bug" scheme="http://blog.viewing.top/tags/bug/"/>
<category term="umi" scheme="http://blog.viewing.top/tags/umi/"/>
<category term="node" scheme="http://blog.viewing.top/tags/node/"/>
</entry>
<entry>
<title>申请letsencrypt泛域名</title>
<link href="http://blog.viewing.top/2022/03/25/%E7%94%B3%E8%AF%B7letsencrypt%E6%B3%9B%E5%9F%9F%E5%90%8D/"/>
<id>http://blog.viewing.top/2022/03/25/%E7%94%B3%E8%AF%B7letsencrypt%E6%B3%9B%E5%9F%9F%E5%90%8D/</id>
<published>2022-03-25T02:42:15.000Z</published>
<updated>2022-03-25T05:15:46.798Z</updated>
<content type="html"><![CDATA[<blockquote><p>因为需要使用泛域名证书且letsencrypt官方提供DNS插件并没有阿里云的(github虽有国人写的 但是 安装我嫌麻烦 😂 ) 所以直接利用<a href="acme.sh">acme.sh</a>工具</p></blockquote><h1 id="Step1-安装-acme-sh"><a href="#Step1-安装-acme-sh" class="headerlink" title="Step1. 安装 acme.sh"></a>Step1. 安装 acme.sh</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">curl https://get.acme.sh | sh -s [email protected]</span><br></pre></td></tr></table></figure><h1 id="Step2-申请阿里云AccessKey-ID-和-AccessKey-Secret"><a href="#Step2-申请阿里云AccessKey-ID-和-AccessKey-Secret" class="headerlink" title="Step2. 申请阿里云AccessKey ID 和 AccessKey Secret"></a>Step2. 申请阿里云<code>AccessKey ID</code> 和 <code>AccessKey Secret</code></h1><ol><li>访问 <a href="https://ram.console.aliyun.com/">https://ram.console.aliyun.com</a></li><li>点击左边用户 然后创建用户 选择Open Api<blockquote><p>(注意保存 AccessKey ID 和 AccessKey Secret)</p> <img src="/images/create-user.png"></blockquote></li><li>为刚刚创建的用户添加权限 <img src="/images/access.png"></li></ol><h1 id="Step3-生成证书"><a href="#Step3-生成证书" class="headerlink" title="Step3. 生成证书"></a>Step3. 生成证书</h1><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Ali_Key和Ali_Secret被保存~/.acme.sh/account.conf并在需要时被重用。</span></span><br><span class="line"><span class="built_in">export</span> Ali_Key=<span class="string">"上面申请的AccessKey ID"</span></span><br><span class="line"><span class="built_in">export</span> Ali_Secret=<span class="string">"上面申请的AccessKey Secret"</span></span><br><span class="line"><span class="comment"># example.com 替换成自己的</span></span><br><span class="line">acme.sh --issue --dns dns_ali -d example.com -d www.example.com</span><br></pre></td></tr></table></figure><p>前面证书生成以后, 接下来需要把证书 copy 到真正需要用它的地方.</p><h1 id="Step4-复制-安装证书-并重启nginx"><a href="#Step4-复制-安装证书-并重启nginx" class="headerlink" title="Step4. 复制/安装证书 并重启nginx"></a>Step4. 复制/安装证书 并重启nginx</h1><blockquote><p>注意, 默认生成的证书都放在安装目录下: ~/.acme.sh/ 请不要直接使用此目录下的文件 正确的使用方法是使用 –install-cert 命令</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># /path/to/keyfile/in/nginx/*.demo.com.cer 改成你想要在 nginx.conf中引入配置的路径</span></span><br><span class="line">acme.sh --install-cert -d <span class="string">"*.example.com"</span> \</span><br><span class="line">--key-file <span class="string">"/path/to/keyfile/in/nginx/example.key"</span> \</span><br><span class="line">--fullchain-file <span class="string">"/path/to/fullchain/nginx/example.cer"</span> \</span><br><span class="line">--reloadcmd <span class="string">"systemctl reload nginx"</span></span><br></pre></td></tr></table></figure><h1 id="nginx-conf"><a href="#nginx-conf" class="headerlink" title="nginx.conf"></a>nginx.conf</h1><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">server {</span><br><span class="line"> # ....</span><br><span class="line"> listen 443 ssl; # acme</span><br><span class="line"> ssl_certificate /path/to/keyfile/in/nginx/demo.key; # acme</span><br><span class="line"> ssl_certificate_key /path/to/fullchain/nginx/demo.cer; # acme</span><br><span class="line">}</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html"><blockquote>
<p>因为需要使用泛域名证书且letsencrypt官方提供DNS插件并没有阿里云的(github虽有国人写的 但是 安装我嫌麻烦 😂 ) 所以直接利用<a href="acme.sh">acme.sh</a>工具</p>
</blockquote>
</summary>
<category term="https" scheme="http://blog.viewing.top/tags/https/"/>
<category term="nginx" scheme="http://blog.viewing.top/tags/nginx/"/>
<category term="letsencrypt" scheme="http://blog.viewing.top/tags/letsencrypt/"/>
</entry>
<entry>
<title>某东sk算法分析</title>
<link href="http://blog.viewing.top/2022/03/11/%E6%9F%90%E4%B8%9Csk%E7%AE%97%E6%B3%95%E5%88%86%E6%9E%90/"/>
<id>http://blog.viewing.top/2022/03/11/%E6%9F%90%E4%B8%9Csk%E7%AE%97%E6%B3%95%E5%88%86%E6%9E%90/</id>
<published>2022-03-11T02:52:13.000Z</published>
<updated>2022-03-11T02:53:13.767Z</updated>
<content type="html"><![CDATA[<blockquote><p>在此前, </p></blockquote>]]></content>
<summary type="html"><blockquote>
<p>在此前, </p>
</blockquote>
</summary>
</entry>
<entry>
<title>Failed to download metadata for repo ‘AppStream’ [CentOS]</title>
<link href="http://blog.viewing.top/2022/02/16/Failed-to-download-metadata-for-repo-%E2%80%98AppStream%E2%80%99-CentOS/"/>
<id>http://blog.viewing.top/2022/02/16/Failed-to-download-metadata-for-repo-%E2%80%98AppStream%E2%80%99-CentOS/</id>
<published>2022-02-16T08:34:17.000Z</published>
<updated>2022-02-16T09:55:15.292Z</updated>
<content type="html"><![CDATA[<p>我在一台服务器上成功安装了<code>CentOS 8</code>，当我尝试使用<code>yum update -y</code> 时 我看到此错误消息：<br><img src="/images/appStream-install-error.jpg"></p><h2 id="下面是原因与修复方法"><a href="#下面是原因与修复方法" class="headerlink" title="下面是原因与修复方法"></a>下面是原因与修复方法</h2><blockquote><p>Fix Failed to download metadata for repo ‘AppStream’ [CentOS]<br><a href="https://www.centos.org/centos-linux-eol/">CentOS Linux8 已 2021 年 12 月 31 日 EOL</a> 这意味着 CentOS 8 将不再从 CentOS 官方项目获得开发资源。在 2021 年 12 月 31 日之后，如果您需要更新您的 CentOS，您需要将镜像更改为<a href="vault.centos.org">vault.centos.org</a>，它们将被永久存档。或者，您可能想要升级到 <a href="https://techglimpse.com/convert-centos8-linux-centosstream">CentOS Stream</a></p></blockquote><h3 id="Step1-进入-etc-yum-repos-d-目录"><a href="#Step1-进入-etc-yum-repos-d-目录" class="headerlink" title="Step1 进入/etc/yum.repos.d/目录"></a>Step1 进入/etc/yum.repos.d/目录</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">cd</span> /etc/yum.repos.d/</span><br></pre></td></tr></table></figure><h3 id="Step2-运行以下命令"><a href="#Step2-运行以下命令" class="headerlink" title="Step2 运行以下命令"></a>Step2 运行以下命令</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sed -i <span class="string">'s/mirrorlist/#mirrorlist/g'</span> /etc/yum.repos.d/CentOS-*</span><br></pre></td></tr></table></figure><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sed -i <span class="string">'s|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g'</span> /etc/yum.repos.d/CentOS-*</span><br></pre></td></tr></table></figure><h3 id="Step-3-现在运行-yum-update-已经ok"><a href="#Step-3-现在运行-yum-update-已经ok" class="headerlink" title="Step 3: 现在运行 yum update 已经ok;"></a>Step 3: 现在运行 <code>yum update</code> 已经ok;</h3><img src="/images/appStream-install.jpg">]]></content>
<summary type="html"><p>我在一台服务器上成功安装了<code>CentOS 8</code>，当我尝试使用<code>yum update -y</code> 时 我看到此错误消息：<br><img src="/images/appStream-install-error.jpg"></p>
<h</summary>
<category term="Bugs" scheme="http://blog.viewing.top/tags/Bugs/"/>
</entry>
<entry>
<title>ESLint + React + Typescript</title>
<link href="http://blog.viewing.top/2021/11/05/react-typescript-eslint/"/>
<id>http://blog.viewing.top/2021/11/05/react-typescript-eslint/</id>
<published>2021-11-05T06:37:39.000Z</published>
<updated>2021-12-23T03:51:45.301Z</updated>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p><code>JavaScript</code> 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 <code>ESLint</code> 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中, 本教程的主要目标是逐步设置并解释添加或执行的每一行，而不是仅仅给您一堆带有大量配置的文件，并期望您能够了解事物的内容和方式正在发生。</p><p><em>那么，让我们开始吧！</em></p><h2 id="先决条件"><a href="#先决条件" class="headerlink" title="先决条件"></a>先决条件</h2><blockquote><p>注意: 如果你没有它，请去 <a href="https://nodejs.org/">NodeJS</a> 网站，下载并安装到你的本地机器上</p></blockquote><ul><li>node version >= 14</li></ul><h2 id="Step1-使用-Typescript-创建一个-React-项目"><a href="#Step1-使用-Typescript-创建一个-React-项目" class="headerlink" title="Step1: 使用 Typescript 创建一个 React 项目"></a>Step1: 使用 <code>Typescript</code> 创建一个 <code>React</code> 项目</h2><blockquote><p>为了简单明了这里直接使用<a href="https://create-react-app.bootcss.com/">create-react-app</a></p></blockquote><p>在终端上运行：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx create-react-app my-app --template typescript</span><br></pre></td></tr></table></figure><h2 id="Step2-从-React-项目中移除预设的-ESLint-配置"><a href="#Step2-从-React-项目中移除预设的-ESLint-配置" class="headerlink" title="Step2: 从 React 项目中移除预设的 ESLint 配置"></a>Step2: 从 <code>React</code> 项目中移除预设的 <code>ESLint</code> 配置</h2><p>React 带有预先设置的 eslint 配置。让我们删除此配置，以便我们可以设置更好的配置。为此，请从<code>package.json</code>文件中删除以下代码</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line">{</span><br><span class="line"> <span class="attr">"eslintConfig"</span>: {</span><br><span class="line"> <span class="attr">"extends"</span>: [<span class="string">"react-app"</span>, <span class="string">"react-app/jest"</span>]</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="Step3-ESLint-安装"><a href="#Step3-ESLint-安装" class="headerlink" title="Step3: ESLint 安装"></a>Step3: <code>ESLint</code> 安装</h2><blockquote><p>您可以使用 npm 或 yarn 安装：</p></blockquote><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install eslint --save-dev</span><br><span class="line"><span class="comment">#or</span></span><br><span class="line">yarn add eslint --dev</span><br></pre></td></tr></table></figure><p>运行后，你会看到<code>ESLint</code>被添加到<code>package.json</code> 的<code>devDependencies</code></p><blockquote><p>PS: 忽略版本。</p></blockquote><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line"> <span class="string">"devDependencies"</span>: {</span><br><span class="line"> <span class="attr">"eslint"</span>: <span class="string">"^8.5.0"</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h2 id="Step4-初始化ESLint"><a href="#Step4-初始化ESLint" class="headerlink" title="Step4: 初始化ESLint"></a>Step4: 初始化<code>ESLint</code></h2><p>然后你应该设置一个配置文件，最简单的方法是使用–init 标志：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npx eslint --init</span><br><span class="line"><span class="comment">#or</span></span><br><span class="line">yarn run eslint --init</span><br></pre></td></tr></table></figure><p>运行此命令时，您需要回答一些有关配置的问题：</p><img src="/images/eslint-install.png"><p>此后你可以在<code>package.json</code>的 devDependencies 检查</p><blockquote><p>PS: 忽略版本</p></blockquote><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// package.json</span></span><br><span class="line"> <span class="string">"devDependencies"</span>: {</span><br><span class="line"> <span class="attr">"@typescript-eslint/eslint-plugin"</span>: <span class="string">"^5.8.0"</span>,</span><br><span class="line"> <span class="attr">"@typescript-eslint/parser"</span>: <span class="string">"^5.8.0"</span>,</span><br><span class="line"> <span class="attr">"eslint"</span>: <span class="string">"^8.5.0"</span>,</span><br><span class="line"> <span class="attr">"eslint-config-airbnb"</span>: <span class="string">"^19.0.2"</span>,</span><br><span class="line"> <span class="attr">"eslint-plugin-import"</span>: <span class="string">"^2.25.3"</span>,</span><br><span class="line"> <span class="attr">"eslint-plugin-jsx-a11y"</span>: <span class="string">"^6.5.1"</span>,</span><br><span class="line"> <span class="attr">"eslint-plugin-react"</span>: <span class="string">"^7.27.1"</span>,</span><br><span class="line"> <span class="attr">"eslint-plugin-react-hooks"</span>: <span class="string">"^4.3.0"</span></span><br><span class="line"> }</span><br></pre></td></tr></table></figure><h2 id="Step-5-运行ESLint"><a href="#Step-5-运行ESLint" class="headerlink" title="Step 5: 运行ESLint"></a>Step 5: 运行<code>ESLint</code></h2><p>在项目中新建一个终端</p><ul><li><p>要运行 <code>ESLint</code> 并查看它指向的错误，只需运行：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx eslint <targetFile></span><br></pre></td></tr></table></figure></li><li><p>要自动修复一些错误，您可以使用<code>--fix</code>：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx eslint <targetFile> --fix</span><br></pre></td></tr></table></figure></li></ul><h2 id="Step-5-1-让我们在项目中使用"><a href="#Step-5-1-让我们在项目中使用" class="headerlink" title="Step 5.1: 让我们在项目中使用"></a>Step 5.1: 让我们在项目中使用</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx eslint src/*</span><br></pre></td></tr></table></figure><p>ESLint 输出结果：</p><p><font color='red'>✖ 33 problems (33 errors, 0 warnings) </font><br><font color='red'>14 errors and 0 warnings potentially fixable with the <code>--fix</code> option. </font></p><p>运行自动修复，它变得不那么可怕了，但我们仍然有 19 个错误需要解决。</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx eslint src/* --fix</span><br></pre></td></tr></table></figure><p>ESLint 输出结果：</p><p><font color='red'>✖ 20 problems (19 errors, 1 warning)</font></p><p>虽然我们运行<code>--fix</code> 但是依然还是有错误没有被修复 而且这些错误很多没有意义 那怎么解决呢？</p><p>幸运的是我们可以通过<code>eslintrc.json</code> 去修复他们</p><h2 id="解决剩余问题"><a href="#解决剩余问题" class="headerlink" title="解决剩余问题"></a>解决剩余问题</h2><ol><li><font color='red'>JSX not allowed in files with extension ‘.tsx’</font> (<a href="https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules/jsx-filename-extension.md">react/jsx-filename-extension</a>)<br>在 <code> eslintrc.json</code> 中，添加以下内容：</li></ol><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"rules"</span>: {</span><br><span class="line"> <span class="comment">// ... other rules</span></span><br><span class="line"> <span class="attr">"react/jsx-filename-extension"</span>: [<span class="string">"warn"</span>,{<span class="attr">"extensions"</span>: [<span class="string">".tsx"</span>]} ]</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>如果你想同时允许 ‘.jsx’ 和 ‘.js’， 配置将是:</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"rules"</span>: {</span><br><span class="line"> <span class="attr">"react/jsx-filename-extension"</span>: [<span class="string">"warn"</span>,{<span class="attr">"extensions"</span>:[<span class="string">".tsx"</span>, <span class="string">".jsx"</span>]}]</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><ol start="2"><li><font color='red'>Unable to resolve path to module ‘./XXX’</font> (<a href="https://github.com/import-js/eslint-plugin-import/blob/v2.25.3/docs/rules/extensions.md">import/no-unresolved</a>)</li></ol><ul><li>在项目打开终端安装<code>eslint-import-resolver-typescript</code></li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install eslint-import-resolver-typescript --save-dev</span><br></pre></td></tr></table></figure><ul><li>在 <code> eslintrc.json</code>中，新增一个<code>settings</code>并添加内容：</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"settings"</span>: {</span><br><span class="line"> <span class="attr">"import/resolver"</span>: {</span><br><span class="line"> <span class="attr">"typescript"</span>: {}</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><ol start="3"><li><font color='red'>Missing file extension “tsx” for ‘./XXX’</font> (<a href="https://github.com/import-js/eslint-plugin-import/blob/v2.25.3/docs/rules/extensions.md">import/extensions</a>)<br>在 <code> eslintrc.json</code> 上，在<code>rules</code>中，添加以下内容：</li></ol><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"import/extensions"</span>: [</span><br><span class="line"> <span class="string">"error"</span>,</span><br><span class="line"> <span class="string">"ignorePackages"</span>,</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">"ts"</span>: <span class="string">"never"</span>,</span><br><span class="line"> <span class="attr">"tsx"</span>: <span class="string">"never"</span></span><br><span class="line"> }</span><br><span class="line"> ]</span><br></pre></td></tr></table></figure><ol start="4"><li><font color='red'>‘test’ is not defined.</font></li></ol><ul><li>在 <code> eslintrc.json</code> <code>env</code>中，新增一个<code>jest</code>属性</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> <span class="string">"env"</span>: {</span><br><span class="line"> <span class="attr">"browser"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">"es2021"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">"jest"</span>: <span class="literal">true</span></span><br><span class="line">},</span><br></pre></td></tr></table></figure><ol start="5"><li><font color='red'>‘React’ must be in scope when using JSX </font>(<a href="https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md">react/react-in-jsx-scope</a>)<br>如果你使用 React 17，在 <code> eslintrc.json</code> 中，添加以下内容：</li></ol><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"rules"</span>: {</span><br><span class="line"> <span class="comment">// ... other rules</span></span><br><span class="line"> <span class="attr">"react/react-in-jsx-scope"</span>: <span class="number">0</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>你还可以添加一些自己需要的<a href="https://eslint.org/docs/rules/">规则</a> 比如：<code>quotes</code> <code>react-hooks</code> <code>max-len</code></p><h2 id="将Eslint-集成到-Vs-Code"><a href="#将Eslint-集成到-Vs-Code" class="headerlink" title="将Eslint 集成到 Vs Code"></a>将<code>Eslint</code> 集成到 <code>Vs Code</code></h2><ul><li>安装 <code>Vscode</code> <a href="https://github.com/Microsoft/vscode-eslint"><code>Eslint</code></a>扩展</li></ul><p>转到<code>Vscode</code> 扩展搜索<code>eslint</code> 并安装<br><img src="/images/eslint.png"></p><ul><li>在项目中新建一个 <code>.vscode</code> 文件夹</li><li>并在<code>.vscode</code> 文件夹中新建一个 settings.json</li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="comment">// settings.json</span></span><br><span class="line"> <span class="attr">"editor.formatOnSave"</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">"editor.defaultFormatter"</span>: <span class="string">"dbaeumer.vscode-eslint"</span>,</span><br><span class="line"> <span class="attr">"editor.codeActionsOnSave"</span>: {</span><br><span class="line"> <span class="attr">"source.fixAll.eslint"</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>通过这些配置你可以在保持文件时知道修复 eslint 另外 你可能还需要<a href="https://prettier.io/">prettier</a></p><h2 id="最后，你还可以在package-json中添加一些scripts"><a href="#最后，你还可以在package-json中添加一些scripts" class="headerlink" title="最后，你还可以在package.json中添加一些scripts"></a>最后，你还可以在<code>package.json</code>中添加一些<code>scripts</code></h2><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: {</span><br><span class="line"> <span class="comment">// ... other scripts</span></span><br><span class="line"> <span class="attr">"lint:css"</span>: <span class="string">"stylelint src/**/*.css"</span>,</span><br><span class="line"> <span class="attr">"lint:fix"</span>: <span class="string">"npm run lint -- --fix"</span>,</span><br><span class="line"> <span class="attr">"lint"</span>: <span class="string">"eslint src/*"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>手动运行</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm run lint</span><br><span class="line"><span class="comment"># or</span></span><br><span class="line">yarn lint</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html"><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p><code>JavaScript</code> 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScrip</summary>
<category term="React" scheme="http://blog.viewing.top/tags/React/"/>
<category term="Typescript" scheme="http://blog.viewing.top/tags/Typescript/"/>
<category term="ESLint" scheme="http://blog.viewing.top/tags/ESLint/"/>
</entry>
</feed>