nuxt3 + ts + eslint+ prettier

mcq

发布于 2023-03-01 14:59:34

2.4K0

发布于 2023-03-01 14:59:34

文章被收录于专栏：无所事事者爱嘲笑无所事事者爱嘲笑

初始化nuxt3项目

如果报错参考这篇

添加eslint和prettier

安装以下包，版本不限（这些版本暂时无报错）

{
 "@vue/eslint-config-prettier": "^7.0.0",
 "@vue/eslint-config-typescript": "^11.0.0",
 "eslint": "^8.22.0",
 "eslint-plugin-vue": "^9.3.0",
 "prettier": "^2.7.1",
 "typescript": "^4.9.5",
 "eslint-plugin-nuxt": "^4.0.0", // 针对nuxt3的校验插件
}

创建eslint配置文件

.eslintrc.js 或其它文件格式，在文件中配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:nuxt/recommended', // 针对nuxt3的校验规则
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'vue/multi-word-component-names': 0, // 针对单个单词组件报错的规则关闭
    'prettier/prettier': [
      'warn',
      {
        semi: false,
        singleQuote: true,
        endOfLine: 'auto', // windows初始项目每行尾部可能会出现Delete `␍`eslint(prettier/prettier)报错，如出现添加此项即可，不是最佳方案，详见补充2
      },
    ],
  },
}

注释都是需要注意的地方和常见错误

补充

因为nuxt3中使用了unplugin插件，很多组价和方法都是自动引入，不需手动import。如果使用eslint自带的规则会提示一些未被引入的not defined报错。所以在nuxt3项目中使用'plugin:nuxt/recommended'替换'eslint:recommended'规则，在vue-cli项目中可以使用'eslint:recommended'即可。
Delete ␍eslint(prettier/prettier)报错，是因为mac和windows换行符差异，加endOfLine: 'auto'规则只是忽略换行符差异，但是不利于工程化统一。

方案1：在根目录下添加.editorconfig文件添加配置，然后重启ide

.editorconfig常用备选配置：

root = true

[*]
indent_style = space
indent_size = 2
# 规定换行符格式
end_of_line = crlf   
charset = utf-8
#是否删除换行符之前的空白字符
trim_trailing_whitespace = false
#文件是否应以换行符结尾
insert_final_newline = false

方案2：禁用git全局配置的自动换行功能，然后重新拉代码

如果你用的是windows，文件编码是UTF-8且包含中文，最好全局将autocrlf设置为false。

终端输入命令 git config --global core.autocrlf false

.eslintrc.js常用rules

rules: {
  'vue/multi-word-component-names': 0, // 关闭vue文件和组件命名校验
  'vue/singleline-html-element-content-newline': 'off', // 禁用单行标签内容需换行的校验
  'vue/multiline-html-element-content-newline': 'off', // 禁用多行标签内容需换行的校验
  'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
  'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
  'prettier/prettier': [
    'error',
    {
      printWidth: 140, // 代码单行长度
      tabWidth: 2, // tab键缩进为2空格
      useTabs: false, // 使用空格缩进
      singleQuote: true, // js单引号
      semi: false, // 去分号
      trailingComma: 'none', // 无尾逗号
      arrowParens: 'avoid', // 箭头函数尽可能省略括号
    }
  ]
}

单独拎出一个来说 'vue/max-attributes-per-line' // 强制每行的最大属性数, 这个在eslint-plugin-vue的8.0.0版本被移除了一个属性，可能导致无法使eslint正常工作。不是此篇重点，不赘述，如遇到问题请查看这篇文章

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-02-28，如有侵权请联系 cloudcommunity@tencent.com 删除

eslint