Eslint的认识和使用

对于 eslint 的若认识和使用

【前端工程化】项目搭建篇-项目初始化&prettier、eslint、stylelint、lint-staged、husky

• https://juejin.cn/post/7353504333999505408?searchId=20240607173002F629859B4E08B3AE0203

  • 使用 yarn 安装依赖。node 版本：20.11.0 不会发生错误。很容易 node-sass 安装报错，一般是 node 和 sass 版本不对应，一般可以再这里https://www.npmjs.com/package/node-sass查看版本对应。
  • 截图 (opens new window)
  • 自己修改过的配置（主要是修改了.editorconfig 文件）：这里的所有配置文件完全可以复制到新项目中使用
    • https://github.com/HelenTim/react_demo/tree/rollup_comp

• 无论是 vscode 还是 webstorm、idea 都需要安装 EditorConfig 插件，以便让不同编辑器的基本设定一致

  • .editorconfig里配置的时候，尽量使用以下配置。如果用 tab 缩进的话，不同编辑器可能导致缩进不一致

    •   # 使用空格缩进
        indent_style = space
        # 缩进大小为 4
        indent_size = 4
      

• 上面全都是 vscode 的配置，那么在 webstorm、idea 又应该怎么配置呢？

  • eslint、stylelint、prettier 都自带所以不用再安装这些插件，直接进入设置设置即可

  • eslint 直接在设置里找到 eslint：如下设置即可

    • 

  • stylelint 设置：同样直接在设置里找到 stylelint，设置如下

    • 
    • 有一个奇怪得现象是，stylelint 的信息回一直显示在编辑页面顶部
      • 
      • 无论有没有错误都会一直显示在顶部，具体有没有错需要点击“详细信息”查看。
      • 修复错误的话又可以右键，点击下面选项即可：
        • 
        • 当然我们还可以配置快捷键来运行相应的修复命令；以及可以配合 file watcher 插件来达到保存文件时自动运行修复命令
          • 参考：https://juejin.cn/post/7083689889539031053
            • 截图 (opens new window)

  • prettier 设置：同样这设置里找到后，如下设置

    • 

对于 eslint 的使用

• 前端代码规范工程化最佳实践 - ESLint
  • 文章截图

让 vscode 使用 selint 校验规则：

• 方法一：http://www.3qphp.com/web/javascript/5041.html
• 方法二：这里也介绍了一种 eslint 的配置方式：https://www.jb51.net/article/186060.htm 但是方法二的更加灵活，我们可以根据上面的‘前端代码规范工程化最佳实践 - ESLint’来配置不同环境的 eslint。这里只是使用了 eslint 没有使用其他 vscode 插件。
  • 在这里https://segmentfault.com/a/1190000009077086可以看见在eslint.options.configFile里配置了js路径而方法二里配置了json路径。
    • 这个链接里似乎讲得更清楚；还有 Vue 的配置。
• .eslintignore ：文件作用 https://blog.csdn.net/qq_36711388/article/details/88540310
• 注意点：我们最好只在当前项目下安装 eslint 的 npm 包，全局安装 eslint 的 npm 包可能会让 eslint 规则失效。

从 0 开始建立规范

• https://juejin.cn/post/7085257325165936648
  • 文章截图 (opens new window)