用uni-cli创建项目后使用eslint

发表于 分类于 标签 , Disqus： 本文字数： 389 阅读时长 ≈ 1 分钟

记录一下如何配置eslint（其实是怕下一次又被折磨）。

uni-cli创建项目

由于我是在linux上使用uniapp，无法使用HBuilderX，故采用uni-cli来创建项目并使用vscode进行开发。

uni-cli创建项目很简单，一行命令即可，这里采用vue3/vite版：

1
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

这里只用来创建项目，发布运行什么的具体可以看官网。

使用eslint

eslint的配置文件和配置方式我感觉有好多种，所以在配置的时候折腾了挺久，最好还是按照官网最新文档来：

  • eslint：https://eslint.org/docs/latest/use/getting-started
  • eslint-plugin-vue：https://eslint.vuejs.org/

安装eslint

1
npm init @eslint/config@latest

配置

安装完后，一般项目的根目录下就会出现eslint.config.mjs文件（eslint 9.4.0版本，采用vue框架），主体如下：

1
2
3
4
5
6
7
8
9
10
import pluginVue from "eslint-plugin-vue";

export default [
  ......
  {
    rules: {
    
    }
  }
];

现在我们就要来按照自己的要求来配置，最好是按照官方的文档来定制：eslint-plugin-vue，一般使用的规则会写在rules对象中。

举个🌰

比如我希望在代码中使用双引号，并且语句使用分号结尾，那么eslint.config.mjs文件就可以这样写：

1
2
3
4
5
6
7
8
9
10
11
import pluginVue from "eslint-plugin-vue";

export default [
  ...pluginVue.configs["flat/recommended"],
  {
    rules: {
      quotes: ["error", "double"],
      semi: ["error"]
    }
  }
];

如果在代码中碰到一些eslint的报错，例如

那么可以在报错信息中给出的链接网页中查找

在eslint.config.mjs中的rules中加入"vue/multi-word-component-names": 0后，报错就消失了。