https://github.com/leopoldthecoder/doctor-jones-loader
webpack loader for doctor-jones
https://github.com/leopoldthecoder/doctor-jones-loader
Last synced: 8 months ago
JSON representation
webpack loader for doctor-jones
- Host: GitHub
- URL: https://github.com/leopoldthecoder/doctor-jones-loader
- Owner: Leopoldthecoder
- Created: 2019-01-19T07:58:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T14:33:33.000Z (over 3 years ago)
- Last Synced: 2025-05-08T22:42:01.262Z (about 1 year ago)
- Language: JavaScript
- Size: 711 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# doctor-jones-loader
Links
npm Page
Related Projects
doctor-jones
·
To Be Developed...
### Introduction
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
```