[开发|前端] 解决在vscode中开发vue3项目使用js而非ts时无代码提示和报错提示的问题笔记

朴灿烈づ我的快乐病毒、 2024-03-23 18:25 58阅读 0赞

### 参考文献 ###

[vue项目vscode配置eslint不生效，无法自动检测][vue_vscode_eslint]  
[vue项目中Eslint校验代码报错的解决方案][vue_Eslint]  
[vue eslintrc.js配置][vue eslintrc.js]  
[eslint 配置][eslint]  
[ESLint 的使用和.eslintrc.js配置][ESLint _.eslintrc.js]  
[一步步详细讲解vue3配置ESLint][vue3_ESLint]  
[Node.js项目中如何安装和使用ESLint][Node.js_ESLint]  
[在 vue eslint 报错 error “Component name “\*\*\*\*\*“ should always be multi-word”，该怎么办？][vue eslint _ error _Component name _ should always be multi-word]  
[uniapp eslint error ‘uni‘ is not defined no-undef][uniapp eslint error _uni_ is not defined no-undef]  
[Parsing error: Unexpected token][Parsing error_ Unexpected token]

### 插件安装 ###

npm install --save-dev eslint eslint-plugin-vue

### 配置 ###

.eslintrc.js 文件配置

module.exports = {
        
      // 指定脚本的运行环境， env 关键字指定你想启用的环境，并设置它们为 true
      env: {
        
        browser: true,
        es6: true,
        node: true,
      },
      // 扩展配置文件（设置当前ESLint默认继承的规则（或者你也可以使用标准规则：standard））
      // 一个配置文件一旦扩展，就可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）、并修改所有选项
      extends: [
        'eslint:recommended', // 使用ESLint推荐的规则
        'plugin:vue/vue3-essential',
        'plugin:prettier/recommended', // 样式上eslint和prettier冲突，以prettier为准
      ],
      globals: {
        
        //  脚本在执行期间访问的额外的全局变量
        uni: true, // uni全局变量 
        wx: true // wx全局变量 
      },
      // parser: 'vue-eslint-parser',
      // 解析器选项。sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
      parserOptions: {
        
        ecmaVersion: 2018,
        // parser: "vue-eslint-parser",
        sourceType: 'module',
      },
      // 使用的插件，插件名称省略了eslint-plugin-
      plugins: ['eslint-plugin-vue'],
      // 启用的规则及其各自的错误级别(在这里配置规则)
      rules: {
        
        // 每一项都是一个eslint规则，off-0,warn-1,error-2等为当前规则值
        'no-console': 'warn',
        'no-debugger': 'off',
        'no-redeclare': 0,
        'no-useless-escape': 0,
        'no-mixed-spaces-and-tabs': 0,
        'valid-v-for': 0,
        'space-before-function-paren': 0,
        'comma-dangle': ['error', 'only-multiline'],
        'vue/multi-word-component-names': "off"
      },
    };

[vue_vscode_eslint]: https://blog.csdn.net/Run_youngman/article/details/130765967
[vue_Eslint]: https://www.yii666.com/blog/284020.html
[vue eslintrc.js]: https://blog.csdn.net/lqh4188/article/details/123677186
[eslint]: https://blog.csdn.net/bianliuzhu/article/details/124737349
[ESLint _.eslintrc.js]: https://www.jianshu.com/p/f0f150d4a944
[vue3_ESLint]: https://www.ibashu.cn/news/show_376688.html
[Node.js_ESLint]: https://www.phpfans.net/wz/15253.html
[vue eslint _ error _Component name _ should always be multi-word]: https://blog.csdn.net/qq_57587705/article/details/124674660
[uniapp eslint error _uni_ is not defined no-undef]: https://blog.csdn.net/wz_coming/article/details/119996127
[Parsing error_ Unexpected token]: https://blog.csdn.net/myqq1418/article/details/119031600