文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中怎么使用eslint和editorconfig

2023-06-30 16:01

关注

这篇文章主要介绍“Vue中怎么使用eslint和editorconfig”,在日常操作中,相信很多人在Vue中怎么使用eslint和editorconfig问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue中怎么使用eslint和editorconfig”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

使用eslint和editorconfig方式

使用eslint的好处

避免运行时因格式问题报错

方便团队合作,代码风格统一

安装eslint

命令行执行:

  npm i   eslint eslint-config-standard   eslint-plugin-standard   eslint-plugin-promise   eslint-plugin-import   eslint-plugin-node   eslint-plugin-html -D

eslint-plugin-html插件识别html文件中的script标签里面的JavaScript

文件配置说明

在项目目录新建.eslintrc文件:

{  "extends": "standard",  "plugins": [    "html"  ],  "rules": {    "no-new": "off"  }}

启动命令配置

在package.json的scripts中加入:

"lint": "eslint --ext .js --ext .jsx --ext .vue client/","lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"

client/ 为要检查的文件夹

执行:

npm run lint          //语法检查npm run lint-fix      //自动修复语法检查出现的问题

自动检查语法配置

命令行执行:

npm i eslint-loader babel-eslint -D

然后在.eslintrc文件中添加"parser": "babel-eslint":

{ "extends": "standard",  "plugins": [    "html"  ],  "parser": "babel-eslint",  "rules": {    "no-new": "off"  }}

在webpack的配置文件的module.rules中加入:

{   test: /\.(vue|js|jsx)$/,   loader: 'eslint-loader',   exclude: /node_modules/,   enforce: 'pre'   //预处理},

添加editorconfig

在项目目录新建.editorconfig文件:

root = true    [*]charset = utf-8end_of_line = lfindent_size = 2indent_style = spaceinsert_final_newline = truetrim_trailing_whitespace = true

vue editorconfig编辑器配置说明

editorconfig是什么,有什么用

editorconfig是定义编码样式的配置文件,帮助多人合作项目或者不同编辑器下保持代码风格统一。

editorconfig示例

# http://editorconfig.org  (Editorconfig 的官方网站)# 控制 EditorConfig 约定的范围 root = true # 匹配全部文件[*]# 设置字符集charset = utf-8# 缩进风格 可选"space"、"tab"indent_style = space# 缩进大小 可以是数字(空格数), tab(如果tab大小没设置则按编辑器默认tab大小)indent_size = 2# tab的宽度tab_width = 4# 结尾换行符,可选"lf"、"cr"、"crlf"end_of_line = lf# 文件最后插入一个空行insert_final_newline = true# 删除行尾空格trim_trailing_whitespace = true# 匹配.java结尾的文件[*.java]# 匹配.md结尾的文件[*.md]trim_trailing_whitespace = false

root=true 控制 EditorConfig 约定的范围 , Visual Studio 会在打开的文件的目录和每个父目录中查找名为 .editorconfig 的文件。 到达根文件路径时或找到具有 root=true 的 .editorconfig 文件时搜索结束。

检查是否生效

在项目的 js 文件中使用 tab 键进行缩进,分别修改 indent_size 属性值为 2 和 4,观察是否有变化。

如果没有任何变化,说明还没有安装 Editorconfig 插件。

Editorconfig 插件

该插件的作用是告诉开发工具,如 Webstorm 自动去读取项目根目录下的 .editorconfig 配置文件,如果没有安装这个插件,光有一个配置文件是无法生效的。

Webstorm 2017.1 版本之后都是自动安装这个插件的。

到此,关于“Vue中怎么使用eslint和editorconfig”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯