doctor-jones-loader

Introduction

This is a webpack loader for 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

npm i doctor-jones-loader -D

Configuration

The simplest example is:

// 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 to see which options doctor-jones supports.

{
  // ...
  use: [
    {
      loader: 'doctor-jones-loader',
      options: {
        formatOptions: {
          spacing: false
        }
      }
    }
  ]
}

To add JSX support (suppose you're using React):

// 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:

// 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:

// 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:

const str1 = 'doctor-jones是一个“治疗”中英文混排格式的工具'
// doctor-jones-disabled-line
const str2 = 'doctor-jones是一个“治疗”中英文混排格式的工具'

// str1 will be formatted while str2 will not