本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(2)

vite框架使用eslint+prettier配置,并且将错误信息显示在浏览器界面上

发布于2022-03-12 21:20     阅读(1464)     评论(0)     点赞(25)     收藏(1)


vscode编辑器当中使用vite框架,配置eslint:

首先在vite项目中,安装eslint-plugin-vue依赖

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-html prettier @babel/plugin-syntax-dynamic-import babel-eslint

or

yarn add  eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-html prettier --dev

在根目录下创建.eslintrc.js

.eslintrc.js配置如下

  1. module.exports = {
  2. env: {
  3. browser: true,
  4. es2021: true,
  5. node: true
  6. },
  7. extends: ['plugin:vue/vue3-recommended', 'prettier'],
  8. parserOptions: {
  9. parser: 'babel-eslint',
  10. sourceType: 'module',
  11. allowImportExportEverywhere: true,
  12. ecmaVersion: 2019,
  13. sourceType: 'module'
  14. },
  15. plugins: ['@babel/plugin-syntax-dynamic-import', 'vue', 'html', 'prettier'],
  16. rules: {
  17. 'prettier/prettier': 'error'
  18. }
  19. };

在根目录下创建.prettierrc 

  1. {
  2. "semi": true,
  3. "endOfLine": "auto",
  4. "singleQuote": true,
  5. "trailingComma": "none"
  6. }

vscode编辑器配置

  1. {
  2. "editor.codeActionsOnSave": {
  3. "source.fixAll": true,
  4. "source.fixAll.eslint": true
  5. },
  6. "eslint.alwaysShowStatus": true,
  7. "eslint.validate": [
  8. "vue",
  9. "javascript",
  10. "javascriptreact",
  11. "html",
  12. ],
  13. "[html]": {
  14. "editor.defaultFormatter": "esbenp.prettier-vscode"
  15. },
  16. "eslint.options": {
  17. "overrideConfig": {
  18. "env": {
  19. "browser": true,
  20. "es6": true
  21. },
  22. "parserOptions": {
  23. "ecmaVersion": 2019,
  24. "sourceType": "module",
  25. "ecmaFeatures": {
  26. "jsx": true
  27. }
  28. },
  29. "rules": {
  30. "no-debugger": "off"
  31. }
  32. }
  33. },
  34. }

完成以上配置后在vite框架下就可以使用eslint+prettier进行格式化校验了,但是如果创建路由进行懒加载的话

 

会出现这么一个错误。

许多网上教程说安装babel-eslint插件并且,在 .eslintrc.js配置中加入

 

 这是虽然解决了路由懒加载那里的错误,但是在出现import的地方都会出现新的错误

所以,干脆直接忽略掉路由文件夹下的校验,具体做法是在根目录下创建 .eslintignore文件,在该文件中加入router,忽略掉router文件夹下的所有校验。

 重启vscode编辑器。

浏览器界面显示 ESLint的 错误

对于大多数开发人员和团队来说,我们目前的设置可能足以提高生产力。但是,如果您想更进一步,您可以安装 Vite ESLint 插件以在浏览器中查看覆盖在您的应用程序上的 ESLint 问题。

使用 Vite 在浏览器中覆盖 ESLint 错误

这使得那些无法自动修复的 ESLint 错误无法被忽略。我知道一些喜欢这个的开发人员和其他人觉得它超级烦人,所以如果你愿意就安装它,否则只要确保你特别注意你的 IDE 中的那些红色曲线。

vite-plugin-eslint通过运行安装

npm install vite-plugin-eslint --save-dev

然后通过导入插件注册插件并将其添加为插件vite.config.js

  1. import { defineConfig } from 'vite';
  2. import eslintPlugin from 'vite-plugin-eslint';
  3. export default defineConfig({
  4.   plugins: [eslintPlugin()],
  5. });

就是这样,任何 ESLint 错误现在都会在浏览器中报告!如果它不适合您,请尝试重新启动development server




所属网站分类: 技术文章 > 博客

作者:Hggh

链接:http://www.qianduanheidong.com/blog/article/317168/060326e2c6c273f1d98a/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

25 0
收藏该文
已收藏

评论内容:(最多支持255个字符)