markdown 使用ESLint和AirBnB样式指南规则配置Atom编辑器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown 使用ESLint和AirBnB样式指南规则配置Atom编辑器相关的知识,希望对你有一定的参考价值。

### Configuring ESLint in your project

The first thing we need to do is configure ESLint in our project. Remember we are going to use the AirBnB style guide so we need no install the required package and make our ESLint configuration extend from the AirBnB ESLint configuration.

- Install ESLint locally to your project: `> npm install eslint --save-dev`.

- Install the [AirBnB ESLint configuration](https://www.npmjs.com/package/eslint-config-airbnb). Following package instructions we need to execute next sentences to install the right package versions and dependencies:

  ```bash
  > export PKG=eslint-config-airbnb;
  > npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG"
  ```

- Create a `.eslintrc` file in the root of our project. We must be sure to include the property `"extends": "airbnb"` as part of the configuration.

Next is a sample configuration file. Note we inherited configuration from AirBnB. In addition, we have added the eslint rules `valid-jsdoc` and `require-jsdoc` to forces us to write some JSDoc for functions, methods and classes.

```javascript
{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true
  },
  "rules": {
    "valid-jsdoc": ["error", {
      "requireReturn": true,
      "requireReturnType": true,
      "requireParamDescription": true,
      "requireReturnDescription": true
    }],
    "require-jsdoc": ["error", {
        "require": {
            "FunctionDeclaration": true,
            "MethodDefinition": true,
            "ClassDeclaration": true
        }
    }]
  }
}
```

Right now our project is configured with ESLint and the base set of rules from AirBnB, but it requires we execute ESLint manually or automatize in some way (in the build process).

### Installing Atom plugins

Lets go to configure Atom to automatically lint files and show us message while coding.

> Be sure you have completed successfully the previous sections.

- Install the Atom plugin [linter-eslint](https://github.com/AtomLinter/linter-eslint). You are finished :)

The plugin will detect automatically the `.eslintrc` file in your project and will start linting on the fly the source code showing all the errors and warning.

以上是关于markdown 使用ESLint和AirBnB样式指南规则配置Atom编辑器的主要内容,如果未能解决你的问题,请参考以下文章

Airbnb、ESLint、Prettier 在 Switch 和 Case 缩进上的冲突

使用 eslint-config-airbnb 扩展名为“.js”的文件中不允许使用 JSX

无法使用 eslint-config-airbnb 解析依赖关系树

Atom 与 prettier、eslint 和 airbnb 风格的 React 开发指南

Typescript、Airbnb 和 eslint 导入/无外部依赖项(带别名)

eslint推荐编码规范和airbnb推荐编码规范