Vue中使用eslint和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 版本之后都是自动安装这个插件的。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341