Vue中使用eslint和editorconfig方式

目录
  • 使用eslint和editorconfig方式
    • 使用eslint的好处
    • 安装eslint
    • 文件配置说明
    • 启动命令配置
    • 自动检查语法配置
    • 添加editorconfig
  • vue editorconfig编辑器配置说明
    • editorconfig是什么，有什么用
    • editorconfig示例
    • 检查是否生效
    • Editorconfig 插件

使用eslint和editorconfig方式

使用eslint的好处

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

2、方便团队合作，代码风格统一

安装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-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_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 版本之后都是自动安装这个插件的。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解ESLint在Vue中的使用小结

    ESLint是一个QA工具,用来避免低级错误和统一代码的风格 ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格: 2.审查代码是否存在语法错误: 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用 在初始化项目时选择是否使用 ESLint管理代码(选择Y则默认开启) Use ESLint to lint your code? (Y/n) 默认使用的是此标准https://github.com/standard/standard/blob/m

  • vue3+ts+EsLint+Prettier规范代码的方法实现

    目录 使用 EsLint的使用 添加配置文件 Prettier的使用 使用husky和lint-staged构建代码 增加setting.json配置 参考资料 本文主要介绍在Vue3中使用TypeScript做开发时,如何安装与配置EsLint和Prettier,以提高编码规范. (1)EsLint 提供编码规范: (2)Prettier 是一个 Opinionated 的代码格式化工具. 使用 EsLint的使用 安装依赖 npm i -D eslint eslint-plugin-vue

  • vue脚手架vue-cli的学习使用教程

    vue-cli的模板 vue-cli的脚手架项目模板有webpack-simple 和 webpack 两种的区别在于webpack-simple 没有包括Eslint 检查等功能 vue-cli的项目结构 . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.

  • Vue中使用eslint和editorconfig方式

    目录 使用eslint和editorconfig方式 使用eslint的好处 安装eslint 文件配置说明 启动命令配置 自动检查语法配置 添加editorconfig vue editorconfig编辑器配置说明 editorconfig是什么,有什么用 editorconfig示例 检查是否生效 Editorconfig 插件 使用eslint和editorconfig方式 使用eslint的好处 1.避免运行时因格式问题报错 2.方便团队合作,代码风格统一 安装eslint 命令行执行

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

  • ant design vue中表格指定格式渲染方式

    注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1: 指定渲染函数: const columns = [ { title: '排名', dataIndex: 'key', customRender: renderContent // 渲染函数的规则 }, { title: '搜索关键词', dataIndex: 'keyword', customRender: (text, row, index) => { if (index

  • 在vue中使用eslint,配合vscode的操作

    不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性.这所谓工欲善其事,必先利其器,个人推荐 eslint+vscode 来写 vue,绝对有种飞一般的感觉. 每次保存,vscode就能标红不符合eslint规则的地方,同时还会做一些简单的自我修正.安装步骤如下: 首先安装eslint插件 安装并配置完成 ESLint 后,我们继续回到 VSCode 进行扩展设置,依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • Vue中的ESLint配置方式

    Vue中的ESLint配置方式

    目录 说说Vue项目中添加ESLint的规则 第一步:安装 第二步:配置.eslintrc文件 第三步:如图配置 用惯了组里统一的代码风格,再看默认的vue项目代码很是别扭,记录下ESLint配置,以后直接copy paste,美滋滋 官网:https://eslint.org/docs/rules/ ESLint配置方式 ESLint有三种配置方式,一般自定义规则较少时,选第2种:自定义配置很多,建议第1种:第3种常用于对某句代码禁用eslint. 1.在package.json中通过esli

  • vue中使用Axios最佳实践方式

    目录 1.前言 2.使用 2.1安装 2.2基本用例 2.2.1 get请求 2.2.2post请求 3.配置 3.1语法 3.2别名 4.Axios实例 4.1语法 4.2请求配置 4.3响应的配置 配置的优先级 5.拦截器 6.错误拦截 7.取消请求 8.完整封装 建立http.ts文件编写clas Http类 9.总结 1.前言 最近在写vue3的项目,需要重新搭建脚手架并且使用网络请求接口,对于js的网络请求接口的一般有几种常用的方式: fetch XMLHttpRequests aja

  • vue中路由跳转的方式有哪些你知道吗

    目录 第一种方式:router-link (声明式路由) 第二种方式:router.push(编程式路由) 第三种方式:this.$router.push() (函数里面调用) 第四种方式:this.$router.replace() (用法同上,push) 参考: 总结 第一种方式:router-link (声明式路由) 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/

  • vue中this.$parent的使用方式

    目录 vue组件this.$parent 一.在实例中 二.在组件中调用组件 vue子组件this.$parent调用父组件方法报错 TypeError:this.parent.xxx is not a function 或者将子组件移到 UI 组件外面也可以调用到 vue组件this.$parent 在使用vue时,你可能会用到this.$parent来进行组件与组件或者组件与外部实例的数据以及方法调用,这里简单介绍下两种使用环境.(这里你可以理解外部实例为非第三方组件) 一.在实例中 thi

  • vue中对时间戳的处理方式

    目录 vue对时间戳的处理 1.自建js文件 2.在组件模板中引用定义好的时间戳函数 3.设置好在script中的引用和定义 vue时间戳转换 vue对时间戳的处理 1.自建js文件 文件位置根据自己的项目位置自定义 export function formatDate(date, fmt) {     if (/(y+)/.test(fmt)) {         fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 -

随机推荐