atom での eslint の構成と使用法に関する簡単な説明-atom-php.cn

atom での eslint の構成と使用法に関する簡単な説明

青灯夜游

リリース： 2022-02-15 19:36:30

転載

3585 人が閲覧しました

この記事では、eslint と atom を併用する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

atom での eslint の構成と使用法に関する簡単な説明

[関連する推奨事項: 「atom チュートリアル」]

aotm プラグイン linter-eslint をダウンロードする

https://github.com/AtomLinter/linter-eslint

次のような設定が必要です:

プロジェクトの eslint とplugin
- $ npm i --save-dev eslint [eslint-plugins]
eslint とプラグインをグローバルにインストールします
- $ npm i -g eslint [eslint-plugins]
- Activate Use Global Eslint パッケージオプション
- (オプション) Set Global Node Path with $ npm config get prefix

には、自分でダウンロードできるいくつかのプラグインが用意されています ( ps: バージョンの違いによりプラグインエラーが発生します)

eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin -react
eslint-plugin-html (HTML のスクリプトを解析できます。最新バージョン v4 は初期の eslint と競合します)

次に、 project
$ eslint --init

プロンプトをオフにするには、次のコメントを使用します。

/* eslint-disable */

ログイン後にコピー

eslintignore を使用して特定のファイルとディレクトリを無視する

.eslintignore ファイルを作成し、フィルタリングする必要があるフォルダーまたはファイルを追加します

 build/*
 app/lib/*

ログイン後にコピー

コマンドラインで --ignore-path を使用します:

$ eslint --ignore-path .eslintignore --fix app/*

パスは相対パスです。 .eslintignore の場所または現在の作業ディレクトリです。

詳細については、http://eslint.cn/docs/user-guide/cconfiguring

を参照してください。基本構成:

module.exports = {
    parser: &#39;babel-eslint&#39;,

    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },

    // 以当前目录为根目录，不再向上查找 .eslintrc.js
    root: true,

    // 禁止使用 空格 和 tab 混合缩进
    "extends": "eslint:recommended",

    globals: {
        // 这里填入你的项目需要的全局变量
        // jQuery: false,
        $: false,
        wx: false,
    },
    
    // eslint-plugin-html 开启
    "plugins": [
        "html"
    ],

    "parserOptions": {
        "ecmaFeatures": {
            "jsx": false
        },
        "sourceType": "module"
    },

    "rules": {
        "indent": ["error", &#39;tab&#39;],

        "linebreak-style": ["error","unix"],

        "quotes": ["error","single"],

        "semi": ["error","always"],

        "semi": ["error","always"],

        "arrow-spacing": ["error", { "before": true, "after": true }],

        "no-unused-vars": "off", //禁止提示没有使用的变量，或者函数

        "block-spacing": "error",

        "no-console": "off", //可以使用console

        "keyword-spacing": ["error", { "before": true }] //强制关键字周围空格的一致性

    }
};

ログイン後にコピー

プログラミング関連の知識については、プログラミング教育をご覧ください。！

以上がatom での eslint の構成と使用法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。