devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

eslint vscode 集成 vue3+ts+git_vscode expression expected

作者：繁依Fanyi0 | 2024-03-27 00:48:32

赞

踩

vscode expression expected
  1. npm install eslint --save-dev
  2.  
  3. npm init @eslint/config
  4.  
  5.  To check syntax only 仅检查语法
  6.   To check syntax and find problems 检查语法并查找问题
  7. > To check syntax, find problems, and enforce code style 检查语法、发现问题并强制执行代码样式
  8.  
  9. ? What type of modules does your project use? ... 选择项目中的js模块是什么规范
  10. > JavaScript modules (import/export) es6规范
  11.   CommonJS (require/exports) 
  12.   None of these 都不是
  13. Does your project use TypeScript? » No / Yes 项目中是否使用ts 是否需要ts的验证选择yes
  14.  Where does your code run? ... 选择代码的运行环境 选择浏览器
  15. √ Browser 浏览器
  16.  Node node'
  18. ? How would you like to define a style for your project? ...代码风格 选择流行的 
  19. > Use a popular style guide 流行的 拿过来用或者改
  20.   Answer questions about your style
  22. ? Which style guide do you want to follow? ... 选择一个流行的代码规范
  23.   Airbnb: https://github.com/airbnb/javascript
  24. > Standard: https://github.com/standard/standard
  25.   Google: https://github.com/google/eslint-config-google
  26.   XO: https://github.com/xojs/eslint-config-xo
  28. What format do you want your config file to be in? 选择eslint配置文件保存格式
  29. > JavaScript
  30.   YAML
  31.   JSON
  33. Checking peerDependencies of eslint-config-standard@latest
  34. The config that you've selected requires the following dependencies:
  35.  
  36. eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0 @typescript-eslint/parser@latest
  37. ? Would you like to install them now? » No / Yes 根据你的选择 是否按照这些依赖

安装eslint 添加esline校验命令

  1. "scripts": {
  2.     "dev": "vite",
  3.     "build": "vue-tsc --noEmit && vite build",
  4.     "preview": "vite preview",
  5.     "lint": "eslint ./src/**/*.{js,jsx,vue,ts,tsx} --fix" 在src文件下对以js,jsx,vue,ts,tsx结尾的文件进行验证 --fix 简单的问题自动修复
  6.   },

 验证eslint是否生效 

npm run lint

出现以下错误

 vue3 用的是vue2老版本的验证规则  只允许出现一个根节点  在node_modules文件中搜索eslint-pugin-vue找到vue的验证规则  在.eslintrc.js替换成vue3的验证规则

代码规范和ESLint-编辑器集成

 1 如何在编辑器中看到不符合规范的提示 

1-1卸载/禁用 vetur

1-2安装 eslint

-只要安装启用这个插件 就会查找项目中的eslint配置规则 并且给出提示

-如何格式化  需要手动配置 vscode 设置中找到  不同项目的eslint规则不同 这个插件是根据项目的eslint来进行校验的

 鼠标右键使用...配置格式化文档的默认值

1-3安装 Vue Language Features Volar

贴一下VSCode的settings.json

  1. {
  2.  
  3.   // tab 大小为2个空格
  4.   "editor.tabSize": 2,
  5.   // 100 列后换行
  6.   "editor.wordWrapColumn": 100,
  7.   // 保存时格式化
  8.   "editor.formatOnSave": true,
  9.   // 开启 vscode 文件路径导航
  10.   "breadcrumbs.enabled": true,
  11.   // prettier 设置语句末尾不加分号
  12.   "prettier.semi": false,
  13.   // prettier 设置强制单引号
  14.   "prettier.singleQuote": true,
  15.   // 选择 vue 文件中 template 的格式化工具
  16.   "vetur.format.defaultFormatter.html": "prettyhtml",
  17.   // 显示 markdown 中英文切换时产生的特殊字符
  18.   "editor.renderControlCharacters": true,
  19.   "vetur.format.scriptInitialIndent": true,
  20.   // eslint 检测文件类型
  21.   "eslint.validate": [
  22.     "vue",
  23.     "html",
  24.     "javascript",
  25.     "typescript",
  26.     "javascriptreact",
  27.     "typescriptreact",
  28.     {
  29.       "language": "html",
  30.       "autoFix": true
  31.     },
  32.     {
  33.       "language": "vue",
  34.       "autoFix": true
  35.     }
  36.   ],
  37.   // vetur 的自定义设置
  38.   "vetur.format.defaultFormatterOptions": {
  39.     "prettier": {
  40.       "singleQuote": true,
  41.       "semi": false
  42.     }
  43.   },
  44.   "[vue]": {
  45.     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  46.   },
  47.   "editor.codeActionsOnSave": {
  48.  
  49.     "source.fixAll.eslint": true
  50.   },
  51.   "vetur.completion.scaffoldSnippetSources": {
  52.     "workspace": "
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/320740
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。