今回は、EsLint の初心者が EsLint を始めるにあたって知っておくべき 注意事項 をご紹介します。実際の事例をいくつか紹介しますので、一緒に見ていきましょう。
ESLintはプラグインjavascriptコード検出ツールで、一般的なJavaScriptコードエラーをチェックするために使用でき、コードスタイルチェックも実行できます。あなたは、一連の ESLint 設定を指定し、作成したプロジェクトにそれらを適用して、補助的なコーディング標準の実行を実現し、プロジェクト コードの品質を効果的に管理したいと考えています。
ESLint インストール: ローカル インストール、グローバル インストール
$ npm install eslint --save-dev
$ ./node_modules/.bin/eslint --init
を生成した後、次のように任意のファイルまたはディレクトリで ESLint を実行できます:
$ ./node_modules/.bin/eslint index.js
index。 js は、テストする必要がある js ファイルです。使用するプラグインまたは共有構成 (ローカルにインストールされた ESLint と連携するには、ローカルにインストールする必要があります)。
ESLint をすべてのプロジェクトで利用できるようにしたい場合は、ESLint をグローバルにインストールすることをお勧めします。
$ npm install -g eslint
設定ファイル
$ eslint --init
を生成した後、任意のファイルまたはディレクトリでESLintを実行できます
$ eslint index.js
追記: eslint --initは各プロジェクトでeslintのセットアップと設定に使用され、ローカルにインストールされたESLintを実行します。とそのプラグインのディレクトリ。グローバルにインストールされた ESLint を使用する場合は、構成で使用されるすべてのプラグインをグローバルにインストールする必要があります。
1. プロジェクトのルートディレクトリに package.json ファイルを生成します ( ESLint を構成するプロジェクトには package.json ファイルが必要です。ない場合は、npm init -y を使用して生成できます )
$ npm init -y
インストール方法は個人プロジェクトのニーズに応じてインストールされます。ここではグローバルインストールを使用します)
$ npm install -g eslint
function merge () { var ret = {}; for (var i in arguments) { var m = arguments[i]; for (var j in m) ret[j] = m[j]; } return ret; } console.log(merge({a: 123}, {b: 456}));
$ node index.js { a: 123, b: 456 }
$ eslint index.js
Oops! Something went wrong! :( ESLint: 4.19.1. ESLint couldn't find a configuration file. To set up a configuration file for this project, please run: eslint --init ESLint looked for configuration files in E:\website\demo5\js and its ancestors. If it found none, it then looked in your home directory. If you think you already have a configuration file or if you need more help, please stop by the ESLint chat room: https://gitter.im/eslint/eslint
$ eslint --init
? How would you like to configure ESLint? Answer questions about your style ? Are you using ECMAScript 6 features? Yes ? Are you using ES6 modules? Yes ? Where will your code run? Browser ? Do you use CommonJS? Yes ? Do you use JSX? No ? What style of indentation do you use? Tabs ? What quotes do you use for strings? Single ? What line endings do you use? Windows ? Do you require semicolons? No ? What format do you want your config file to be in? JavaScript
module.exports = { "env": { "browser": true, "commonjs": true, "es6": true }, "extends": "eslint:recommended", "parserOptions": { "sourceType": "module" }, "rules": { "indent": [ "error", "tab" ], "linebreak-style": [ "error", "windows" ], "quotes": [ "error", "single" ], "semi": [ "error", "never" ] } };
module.exports = { "extends": "eslint:recommended" };
10:1 error Unexpected console statement no-console 10:1 error 'console' is not defined no-undef ✖ 2 problems (2 errors, 0 warnings)
'console' が定義されていません no-undef --- コンソール変数が定義されていません未定義の変数は使用できません
コンソールプロンプトが使用できない場合は、コンソールなしを無効にして、設定ファイルにルールを追加できます
module.exports = { extends: 'eslint:recommended', rules: { 'no-console': 'off', }, };
次に、no-undef に対する解決策があります。エラーの理由は、JavaScript にはブラウザや Node.js などの多くの実行環境があるためです。また、PostgreSQL など、JavaScript をスクリプト エンジンとして使用するソフトウェア システムも数多くあります。 JavaScript を使用してストレージ エンジンを作成すると、これらのオペレーティング環境にはコンソール オブジェクトが存在しない可能性があります。さらに、ブラウザ環境には
window オブジェクト がありますが、Node.js にはありません。Node.js にはプロセス オブジェクトがありますが、ブラウザ環境にはありません。 そのため、設定ファイルでプログラムのターゲット環境を指定する必要もあります: module.exports = {
extends: 'eslint:recommended',
env: {
node: true,
},
rules: {
'no-console': 'off',
}
};
ファイル構成を使用する: プロジェクトのルート ディレクトリに .eslintrc という名前の新しいファイルを作成し、このファイルにいくつかのチェック ルールを追加します。 ファイル設定方法
'env': { 'browser': true, 'commonjs': true, 'es6': true },
globals :追加のグローバル変数
globals: { vue: true, wx: true },
ルールには 3 つのエラーレベルがあります:
0或’off’:关闭规则。 1或’warn’:打开规则,并且作为一个警告(并不会导致检查不通过)。 2或’error’:打开规则,并且作为一个错误 (退出码为1,检查不通过)。 参数说明: 参数1 : 错误等级 参数2 : 处理方式
設定コードのコメントメソッド
忽略 no-undef 检查 /* eslint-disable no-undef */ 忽略 no-new 检查 /* eslint-disable no-new */ 设置检查 /*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/
多くの設定とルールがあります。興味のある学生はここを参照してください: ルール
我们使用配置js文件是以extends: 'eslint:recommended'为基础配置,但是大多数时候我们需要制定很多规则,在一个文件中写入会变得很臃肿,管理起来会很麻烦。
新建一个文件比如eslint-config-public.js,在文件内容添加一两个规则。
module.exports = { extends: 'eslint:recommended', env: { node: true, }, rules: { 'no-console': 'off', 'indent': [ 'error', 4 ], 'quotes': [ 'error', 'single' ], }, };
然后原来的.eslintrc.js文件内容稍微变化下,删掉所有的配置,留下一个extends。
module.exports = { extends: './eslint-config-public.js', };
这个要测试的是啥呢,就是看看限定缩进是4个空格和使用单引号的字符串等,然后测试下,运行eslint index.js,得到的结果是没有问题的,但是如果在index.js中的var ret = {};前面加个空格啥的,结果就立马不一样了。
2:1 error Expected indentation of 4 spaces but found 5 indent ✖ 1 problem (1 error, 0 warnings) 1 error, 0 warnings potentially fixable with the `--fix` option.
这时候提示第2行的是缩进应该是4个空格,而文件的第2行却发现了5个空格,说明公共配置文件eslint-config-public.js已经生效了。
除了这些基本的配置以外,在npm上有很多已经发布的ESLint配置,也可以通过安装使用。配置名字一般都是eslint-config-为前缀,一般我们用的eslint是全局安装的,那用的eslint-config-模块也必须是全局安装,不然没法载入。
在执行eslint检查的时候,我们会经常看到提示“--flx”选项,在执行eslint检查的时候添加该选项会自动修复部分报错部分(注意这里只是部分,并不是全部)
比如我们在规则中添加一条no-extra-semi: 禁止不必要的分号。
'no-extra-semi':'error'
然后,我们在index.js最后多添加一个分号
function merge () { var ret = {}; for (var i in arguments) { var m = arguments[i]; for (var j in m) ret[j] = m[j]; } return ret;; } console.log(merge({a: 123}, {b: 456}));
执行eslint index.js,得到结果如下:
7:16 error Unnecessary semicolon no-extra-semi 7:16 error Unreachable code no-unreachable ✖ 2 problems (2 errors, 0 warnings) 1 error, 0 warnings potentially fixable with the `--fix` option.
然后我们在执行eslint index.js --fix就会自动修复,index.js那个多余的分号也就被修复消失不见了。
以上是我在学习eslint整理的一些资料,不算太全面,对于像我这样的新手入门足够了
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上が初心者向け EsLint について知っておくべきことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。