淺談atom中eslint的設定與使用方法

本篇文章跟大家介紹一下eslint & atom 搭配使用。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【相關推薦：《atom教學》】

下載aotm外掛程式linter-eslint

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

#需要設定如下：

• Install locally to your project eslint and the plugin
  • $ npm i --save-dev eslint [eslint-plugins]
• Install globally eslint and plugins
  • # $ npm i -g eslint [eslint-plugins]
  • Activate Use Global Eslint package option
  • #(Optional) 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有衝突）

然後在項目下
$ eslint --init

使用以下註釋，關閉提示。

/* eslint-disable */

使用eslintignore 忽略特定的文件和目錄

建立一個.eslintignore 文件，新增需要過濾的資料夾，或檔案

 build/*
 app/lib/*

指令行使用--ignore-path：

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

路徑是相對於.eslintignore 的位置或目前工作目錄

更多查看http://eslint.cn/docs/user-guide/configuring

module.exports = {
    parser: 'babel-eslint',

    "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", 'tab'],

        "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中文網其他相關文章！