规范代码

利用Sublime规范你的代码

怎么安装Editorconfig插件和EsLint,EsLint的Configuration Comments(注释配置)和Configuration Files(文件配置)

2018-10-16侠课岛    初级拔高       

前端/类库/框架/工具/打磨我们的开发利器Sublime 7     0     2456

Editorconfig

在我们的工作中,经常碰到这样的问题,某些同事编码时代码缩进喜欢用两个空格,有的则用tab键,反映到代码文件中,空格和tab的字符编码是不一样的,这时候会导致两个人的代码风格不一致,出于强迫症的你总是去将别人的两个空格改成一个tab,有的公司代码提交时会有code review,公司要求你用两个空格代替tab,而多年习惯的你总是改不过来......

EditorConfig正是解决这一问题的方案,它可以仅仅通过一个.eidtorconfig文件,来统一大家的编码风格,在sublime中,我们按如下步骤来做:

  • 通过package control 安装 Editorconfig插件
  • 在项目跟目录新建.editorcofig文件

以vue-cli生成的项目为例,项目根目录下 .editorconfig文件内容如下

# 表明此目录为项目根目录,停止查找.editorconfig文件
root = true

# 匹配所有文件
[*]

# 设置编码为UTF-8
charset = utf-8
# 设置缩进风格为空格
indent_style = space
# 设置缩进是空格数为2
indent_size = 2
# 换行符,可能值 crlf(回车换行)、cr(回车)、lf(换行)
end_of_line = lf
# 文件以空白行结尾
insert_final_newline = true
# 清除行尾空字符
trim_trailing_whitespace = true

保存文件,重新打开sublime中的项目,可以发现该项目中的代码格式都发生了相应的变化。

关于EditorConfig更加完整的信息可以查看如下网站:

EsLint

EsLint是一个可组装的javascript和jsx检查工具,所谓可组装即可以根据我们配置的规则对代码进行针对性的检查。

安装

  • 保证已安装nodejs,没有安装的话下载安装nodejs
  • 通过命令行 npm install eslint -g 全局安装eslint
  • 通过package control安装 SublimeLinter 插件
  • 通过package control安装 SublimeLinter-Eslint 插件

我们来看一看效果,新建一个项目,在项目根目录下新建.eslintrc.js文件, 内容如下:

module.exports = {
    "env": "browser",
    "rules": {
        "semi": 2,
        "strict": 0
    }
}

新建一个 test.js 文件,内容如下:

function hello (argument) {
  console.log(a)
}

hello();

按下 ctrl + s 保存, 则会出现下图的情况,如未生效,重启sublime即可。

  • 行号处会出现告警,不同的主题下颜色会不一样,我当前使用的主题表现为白色
  • 将鼠标移至对应的光标会显示报错的详细信息,图中的意思是行尾丢失了一个封号

配置

Eslint的配置有两种方式:

  • Configuration Comments(注释配置)
  • Configuration Files(文件配置)

Configuration Comments(注释配置)

使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。如:

  • 指定环境

指定该JavaScript文件的运行环境为nodejs和mocha测试环境,此时会添加nodejs和mocha的全局变量

/* eslint-env node, mocha */
  • 指定额外的全局变量

指定vue和wx为全局变量

/* global vue, wx */
  • 文件内配置规则

配置以下规则:

  • 关闭强制使用全等规则
  • 当代码块只有一条语句时,不可省略大括号
/* eslint eqeqeq: "off", curly: "error" */
  • 关闭规则

注释对内临时禁止规则出现警告

/* eslint-disable */

console.log('hello world');

/* eslint-enable */
  • 注释对规则

注释对内禁止 no-console 规则

/* eslint-disable no-console */

console.log('hello world');

/* eslint-enable no-console*/
  • 文件级规则

当放于文件顶部时,该文件范围内全部禁止 no-console 规则

/* eslint-disable no-console */

console.log('hello world');
  • 当前行规则

禁用对当前行应用规则

console.log('hello world'); // eslint-disable-line no-console

console.log('hello world'); /* eslint-disable-line */

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

7

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?