# doctor-jones-loader

> A webpack loader of doctor-jones

Latest version **1.0.1** (published 2019-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install doctor-jones-loader
pnpm add doctor-jones-loader
yarn add doctor-jones-loader
bun add doctor-jones-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-08-21 |
| First published | 2019-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Leopoldthecoder |
| Maintainers | yi.yang |

## Links

- npm: https://www.npmjs.com/package/doctor-jones-loader
- Repository: https://github.com/Leopoldthecoder/doctor-jones-loader
- Homepage: https://github.com/Leopoldthecoder/doctor-jones-loader#readme
- Issues: https://github.com/Leopoldthecoder/doctor-jones-loader/issues
- npm.io page: https://npm.io/package/doctor-jones-loader

## Dependencies (6)

- [eslint](https://npm.io/package/eslint.md) ^5.16.0
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^9.0.0
- [doctor-jones](https://npm.io/package/doctor-jones.md) ^1.0.2
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [schema-utils](https://npm.io/package/schema-utils.md) ^1.0.0
- [splice-string](https://npm.io/package/splice-string.md) ^2.0.0

## Recent versions

- 1.0.1 (latest) — 2019-08-21
- 1.0.0 — 2019-08-17
- 0.1.1 — 2019-06-16
- 0.1.0 — 2019-06-15

## README

# doctor-jones-loader

<p align="center">
  <a href='https://app.codacy.com/app/Leopoldthecoder/doctor-jones-loader?utm_source=github.com&utm_medium=referral&utm_content=Leopoldthecoder/doctor-jones-loader&utm_campaign=Badge_Grade_Dashboard'><img src='https://img.shields.io/codacy/grade/cd461cedec7f4609870bb5d94439e286.svg?style=for-the-badge' alt='Codacy grade' /></a>
  <a href='https://github.com/Leopoldthecoder/doctor-jones/blob/master/LICENSE'><img src='https://img.shields.io/npm/l/doctor-jones.svg?style=for-the-badge' alt='Liscense' /></a>
  <a href='https://github.com/Leopoldthecoder'><img src='https://img.shields.io/badge/made%20with-%E2%9D%A4-ff69b4.svg?style=for-the-badge' alt='love' /></a>
  <br>
  <br>
  <span>Links</span>
  <br>
  <a href='https://www.npmjs.com/package/doctor-jones-loader'>npm Page</a>
  <br>
  <br>
  <span>Related Projects</span>
  <br>
  <a href='https://github.com/Leopoldthecoder/doctor-jones'>doctor-jones</a>
  <span> · </span>
  <span>To Be Developed...</span>
</p>

### Introduction

<p align="center">
  <img width="70%" src="https://user-images.githubusercontent.com/10095631/51251905-5e293c80-19d5-11e9-8332-80c86b8ea671.gif">
</p>

This is a webpack loader for [doctor-jones](https://github.com/Leopoldthecoder/doctor-jones), which formats your source code during compiling. Once configured, the following parts of your code can be formatted:
- string literals
- template strings
- JSX templates
- templates in .vue SFCs
- scripts in .vue SFCs

Don't worry if you're writing TypeScript, we've also got you covered.

### Installation

```bash
npm i doctor-jones-loader -D
```

### Configuration

The simplest example is:
```js
// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'doctor-jones-loader'
          }
        ]
      }
    ]
  }
}
```

To pass format options for doctor-jones, use `formatOptions`. Click [here](https://github.com/Leopoldthecoder/doctor-jones#%E6%A0%BC%E5%BC%8F%E5%8C%96%E9%80%89%E9%A1%B9) to see which options doctor-jones supports.
```js
{
  // ...
  use: [
    {
      loader: 'doctor-jones-loader',
      options: {
        formatOptions: {
          spacing: false
        }
      }
    }
  ]
}
```

To add JSX support (suppose you're using React):
```js
// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'doctor-jones-loader',
            options: { formatOptions: {/* ... */} }
          },
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react']
            }
          }
        ]
      }
    ]
  }
}
```

Note that we're putting doctor-jones-loader before babel-loader. This is because the loader chain is executed in reverse order.

To add Vue support:
```js
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'doctor-jones-loader',
            options: { formatOptions: {/* ... */} }
          },
          {
            loader: 'vue-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
```

To add TypeScript support:
```js
// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'doctor-jones-loader',
            options: { formatOptions: {/* ... */} }
          },
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}
```

### Disabling formatting
To keep a certain line intact, you can simply add a leading comment for that line:
```js
const str1 = 'doctor-jones是一个“治疗”中英文混排格式的工具'
// doctor-jones-disabled-line
const str2 = 'doctor-jones是一个“治疗”中英文混排格式的工具'

// str1 will be formatted while str2 will not
```

---
_Source: https://npm.io/package/doctor-jones-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._