你好。这是萨拉萨，她的投资组合感觉良好后就开始感到倦怠。
感受力量编程的极限，现在是时候“也许我太危险了，无法彻底理解基础知识！ ?我注意到了。
“我想知道我是否可以在我迄今为止一直在做的前端领域尝试一些新的东西。”
“显然，在团队中开发时，如果能够使用 webpack 构建环境并使用 TypeScript 进行类型定义，那就太好了！”
“好！我们开始吧！”
环境建设永无止境
这是我用作教材的
https://www.youtube.com/playlist?list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad
到现在为止，creat-react-app 一直过着轻松的编程生活，但是webpack 需要很多时间……泪流满面
（creat-react-app 太棒了……
但是，我遇到了一个很棒的工具，如果我没有学习 webpack，我将无法找到它。
那个名字也是ESlint什么时候更漂亮
这两个
- ESlint
- “让我检查一下代码的语法！”
- 更漂亮
- “我负责格式化代码，因为单独使用 ESlint 是不可靠的！”
好像是自动清理代码的神器啊……！
马上介绍
介绍
首先安装软件包。
npm install --save-dev eslint eslint-config-prettier prettier
接下来，我们将使用package.json 的设置。
"scripts": {
"build": "webpack --mode=production",
"start": "webpack-cli serve --mode development",
//ここから追記
"lint": "eslint --fix 'src/**/*.{js,ts}'",
"lint-fix": "eslint --fix './src/**/*.{js,ts}'
&& prettier --write './src/**/*.{js,ts}'"
//ここまで
},
"lint-fix" 描述了 ESlint 和 Prettier 之间的角色划分。
在这里，ESlint 负责检查语法怪癖，而 Prettier 负责修复它们。
此外，调整 ESlint 设置。
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
"prettier/@typescript-eslint",
],
“即使我这么说，你真的会做好你的工作吗？”
我有一个问题，所以让我们把src文件夹中的文件，也就是检查目标，做一个稍微脏一点的代码。
export default class World {
message: string
constructor(message: string) {
this.message = message
}
public sayHello(elem: HTMLElement | null) {
if (elem) {
elem.innerText = this.message
}
}
}
我会留下最后一个 } 有很多空格。
在这种状态下，让我们运行拼写npm run lint-fix 以使代码美观。
然后，
我被冒犯了。 e?你是什么意思它不识别文件？ ?
“你的 PC 是 Mac 还是 Windows？”
似乎路径是绑定的苹果电脑没关系视窗似乎有所不同。
即使我试图找出
“如果你用单引号''将路径括起来，错误就会消失！”
有很多描述，所以我最后说“不，它不起作用，但是哦”。
（即便如此，还是很难找到答案，所以在编程世界中，Windows 是少数……？
顺便说一句，在 Windows 上双引号正确答案是""。
"lint": "eslint "./src/**/*.{js,ts}"",
"lint-fix": "eslint --fix "./src/**/*.{js,ts}"
&& prettier --write "./src/**/*.{js,ts}""
我将再次使用npm run lint-fix 清理 hello.ts。
射线！ ！
（嗯，错误显示已经改变，但它仍然有效......？
“你检查过版本吗？”
当我说“我在抄经，但我得到一个错误......”你安装的包版本和参考源不一样.
查看错误的内容，似乎从 2021 年 2 月 21 日起不再需要 prettier/@typescript-eslint。
让我们注释掉
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
// "prettier/@typescript-eslint",
],
输入路径OK，检查版本OK…npm run lint-fix…！ ！
呃，这家伙动了！ ！
*顺便说一句，即使"prettier" 被注释掉，它也能正常工作。 （我正在研究细节）
结论：上瘾的原因不止一个
我认为这是一个初学者的问题，但是当我想，“如果它按照编写的方式工作，就不能编写代码吗？”
“与编写代码的人的假设相同？”
如果是这样的话，我认为最好看一下仅从代码中无法理解的因素，例如操作系统和版本。
与其说“模仿不好”，我觉得从你没有模仿的地方分析你容易犯错误的地方，最终会激发你自己学习和更新知识的动力。
写完之后才明白
e?你不是在谈论 TypeScript，是吗？ ? ?
参考页
- 日本最通俗易懂的TypeScript入门【基础篇】
- Prettier 简介～了解与 ESLint 的区别并结合使用～
- 解决 Windows“未找到与模式匹配的文件”错误。
- 更漂亮/eslint-config-prettier
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308632112.html