红色文化网站建设,北大荒建设集团有限公司网站,合肥网络推广优化公司,深圳的深圳的网站建设公司前言
在团队协作开发中#xff0c;为了统一代码风格#xff0c;避免一些低级错误#xff0c;应该设有团队成员统一遵守的编码规范。很多语言都提供了Lint工具来实现这样的功能#xff0c;JavaScript也有类似的工具#xff1a;ESLint。除了可以集成到构建工具中(如#x…前言
在团队协作开发中为了统一代码风格避免一些低级错误应该设有团队成员统一遵守的编码规范。很多语言都提供了Lint工具来实现这样的功能JavaScript也有类似的工具ESLint。除了可以集成到构建工具中(如Gulp)在构建过程中检查代码风格以外还可以通过将ESLint和代码编辑器相结合以提供代码风格的实时校验。这里将介绍如何在Visual Studio Code使用ESLint来提供代码风格的实时校验。
安装 Visual Studio Code ESLint 插件
打开 Visual Studio Code 首先使用快捷键 Ctrl Shift P 调出VsCode的控制台然后输入下面的命令安装ESLint插件
ext install ESLint使用 NPM 安装 ESLint
为了方便我们通过ESLint命令行工具来帮助我们生成ESLint相关的配置我们需要进行全局安装
npm install eslint -g 安装完成后我们使用命令行工具进入到需要引入ESLint的项目的目录中然后输入下面的命令进行ESLint的初始化操作
eslint --init执行命令后我们选择相应的代码风格也可以自定义在这里我使用standard风格的规则如下所示 配置ESLint的项目中需要设置好该项目的 package.json 文件如果没有的话可以使用 npm init来设置。 安装完成后我们可以看到除了ESLint命令行工具为我们生成的ESLint依赖包还有一个特殊的.eslintrc.json文件该文件是ESLint的配置文件如下所示
{extends: standard,installedESLint: true,plugins: [standard]
}配置文件中除了声明我们所使用的代码风格以外我们还可以定制自己的规则比如声明全局变量或者规定字符串引号的风格以及其他任何ESLint支持的规则都是可以配置的下面是一个简单的示例
{extends: standard,installedESLint: true,plugins: [standard],rules: {//关闭额外的分号检查//0:关闭1:警告2:异常semi: 0,//字符串必须使用单引号quotes: [error,single]}
}更多配置相关可以参考官方文档http://eslint.org/docs/user-guide/configuring 使用ESLint校验代码风格
安装完成后我们使用 Visual Studio Code 打开项目可以看到ESLint插件在运行了不过给了我们一个错误提示 这时候我们需要在当面目录下输入下面的命令安装相应的开发依赖包
npm install eslint-plugin-promise --save-dev下面我们来测试一些看ESLint是否配置成功了如下所示我们编写一段不符合我们设定代码风格的典型的IIFE代码可以看到ESLint插件为我们提供了准确方便且实时的提示信息 可以看到通过ESLint为我们提供的代码风格检查可以帮助我们可以写出更规范更优雅的Javascript代码了~
参考资料进一步阅读
http://eslint.org/http://eslint.org/docs/user-guide/configuringhttps://marketplace.visualstudio.com/items?itemNamedbaeumer.vscode-eslinthttps://csspod.com/getting-started-with-eslint/ 原文: http://www.gyzhao.me/2016/05/12/VsCodeESLint/ 作者: gyzhao
