项目篇之eslint配置

这个一个非常哈

已于 2023-06-14 16:50:09 修改

阅读量638

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript

于 2023-06-14 16:43:55 首次发布

本文链接：https://blog.youkuaiyun.com/ae_pppppp/article/details/131210253

创建eslint配置文件，调整rules以消除未使用变量警告，如no-unused-vars。使用prettier进行代码格式化，创建.prettierrc文件设定规则。当遇到parse错误，更新eslint的parserOptions，如添加@babel/eslint-parser。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建eslint文件

npm init @eslint/config

运行完成后，会在文件里面形成一个默认的js文件.eslintrc.js，里面会有一些基础的内容

// .eslintrc.js 示例
module.exports = {
  "env": {
      "browser": true,
      "es2021": true
  },
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
}

在你噼里啪啦页面一顿敲之后，一保存，发现会出现很多错误

1. 例如：变量声明没有使用的情况

这种情况的报错，直接复制提示在eslint文件中配置rules即可

rules: {

    'no-unused-vars': 'on', //声明变量未使用---关闭

    'vue/multi-word-component-names': 'off' //组件name是一个单词，不是驼峰命名----关闭

  }

2. 甚至还会包文件书写不规范的问题 let a =1;

身为vscode使用者，我们一般会直接采用格式化插件prettier来美化我们的代码

在项目中创建.prettierrc文件，加入我们的美化代码规范

{
  "trailingComma": "none",
  "singleQuote": true,
  "arrowParens": "avoid",
  "printWidth": 150,
  "endOfLine": "auto"
}

3. 就是大家都会见到的下面的parse报错了

Parsing error: Unexpected token <

Parsing error: Unexpected token

解决办法：

在eslint的parserOptions中加入

parserOptions: {

ecmaVersion: '2021', //指定你要使用的 ECMAScript 语法的版本

sourceType: 'module',

parser: '@babel/eslint-parser'

},

parser: '@babel/eslint-parser' ；也就是这段话来解析js

ps:要先安装该插件 npm i @babel/eslint-parser

最后：附上文案解释

module.exports = {
  /**
   * 指定 ESLint 使用的解析器,从而让 ESLint 能够理解和检查特定的 JavaScript 语法。解析器主要用于将代码转换成抽象语法树（AST），使得 ESLint 能够分析代码中的语言构造、标识符等，并按照语法规则进行校验。
   * vue官方提供了vue-eslint-parser包来对.vue文件中template部分进行转换，script部分需要额外配置一个js/tsparser，可以在parserOption.parser中进行指定。
   */
//   parser: 'vue-eslint-parser',
  // 指定环境，并通过将每个环境设置为 true 来启用想要的环境
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  //   扩展配置文件
  extends: ['eslint:recommended', 'plugin:vue/vue3-essential'],
  //   设置解析器选项
  parserOptions: {
    ecmaVersion: '2021', //指定你要使用的 ECMAScript 语法的版本
    sourceType: 'module',
    parser: '@babel/eslint-parser'
  },
  //   插件配置。可以为eslint添加各种扩展功能的npm包
  plugins: ['vue'],
  rules: {
    'no-unused-vars': 'on', //声明变量未使用---关闭
    'vue/multi-word-component-names': 'off' //组件name是一个单词，不是驼峰命名----关闭
  }
};