iamolegga / prettier-loader Goto Github PK

I'm sorry to say that i think this package is not maintain now.
If you don't want to maintain 'prettier-loader', please give me the name 'prettier-loader' for npm.
Now I create the package prettier-loader.
thank you.

If you know how to fix the issue, make a pull request instead.

• I tried using the latest stable version of prettier-loader
• I've read readme

Select one of these and delete the others:

If asking a question:

• Question: ...
• Code (if necessary) below:

If reporting a bug:
Good morning and thank you for this wonderful tool! I just want to bring to your attention that this loader doesn't work properly on *.vue files. It actually doesn't recognize the syntax and confuse it with *.js files. Could you please provide a fix for that!

• Steps to repeat:
  If you try to add this loader to Storybook Webpack configuration, it will alter the vue files and generate a syntax error
• Code (if necessary) below:

• Expected behavior:

• It should prettify *.vue files

• Observed behavior:

• It is not prettifying *.vue files and it outputs a run error!

Currently the engine is set to 8.4.0, which prevents installation on anything else. For example, we're unable to install on 8.4.1

• Question: How do I use the .prettierrc file inside the webpack.config.js and inside the prettier-loader options?

Do I need to make additional package.json file changes?
Do I need to reference the .prettierrc inside the options: {} ?

This works, but I want it to read from .prettierrc file that is supposedly supported.
config.module.rules.push({
    test: /\.(js|jsx)?$/,
    use: {
        loader: 'prettier-loader',
        options: {
            parser: "babylon",
            printWidth: 100,
            singleQuote: true,
            tabWidth: 4
        }
    }
});

Now I get this when I run npm start:
"No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred."

Even though I have my .prettierrc file with this setup:

{
    "parser": "babylon",
    "printWidth": 100,
    "singleQuote": true,
    "tabWidth": 4
}

Take idea from this pull request

• Question: My prettier.config.js not root folder instead of other config folder. And I want change prettier config file path
  In prettier documentation --config ".env/prettier.config.js" work
  But when I use prettier-loader options config webpack return error

Ignored unknown option `{ "configFile": ".env/prettier.config.js"}

If you know how to fix the issue, make a pull request instead.

• hi , I tried using 3.3.0 with my webpack using babel loader and when i add prettier loader to my webpack config file error happens

works fine without prettier loader

here my webpack config:

`const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
mode: 'development',
context: __dirname + "/src/js",
entry: "./script.js",
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
rules: [
{
test: /.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.jsx?$/,
use: {
loader: 'prettier-loader',
}
}
]
},
plugins: [new ESLintPlugin({})]
}`

and this is my test js file to be compiled:

async function download(url, ok) { if (ok) { return { name: 'Amin', family: 'Ahmady', website: http://${url}` }
} else {
throw new Error('Downloading Failed!')
}
}

async function save(data, ok) {
if (ok) {
return {
user: data,
ok: !ok,
}
} else {
throw new Error('Save Failed!')
}
}

download('github.com', true)
.then((data) => save(data, true))
.then((data) => console.log(data))
.catch((err) => console.log(err.message))
`

where is the isseu?

my prettier config if needed:
# Ignore artifacts: build node_modules

I tried to add comments like:
// prettier-ignore
// prettier-disable
/* eslint-disable prettier/prettier */
Or add external file '.prettierignore'

But your loder still modify file I'd like to ignore. Is there any way to ignore files when modifying?

Hi,

When I changed a js file, the webpack dev server run the process twice. Do you know how to prevent this?

my config is like:

                    test: /\.jsx?$/,
                    include: {
                        test: [
                            appPath.src.root
                        ]
                    },
                    enforce: 'pre',
                    loader: 'prettier-loader',
                    options: {
                        printWidth: 80,               // Specify the length of line that the printer will wrap on.
                        tabWidth: 4,                  // Specify the number of spaces per indentation-level.
                        useTabs: false,               // Indent lines with tabs instead of spaces.
                        semi: true                   // Print semicolons at the ends of statements.
                    }
                },
                {
                    test: /\.jsx?$/,
                    exclude: {
                        test: appPath.dep.nodeModules
                    },
                    loader: "babel-loader",
                    options: babelConfig({})
                },

webpack output this:

webpack: Compiling...
Hash: 861b7b616fa7df682818
Version: webpack 2.6.1
Time: 192ms
        Asset     Size  Chunks         Chunk Names
app.bundle.js  4.58 MB       0  [big]  main
chunk    {0} app.bundle.js (main) 1.63 MB [entry]
 [../node_modules/react-hot-loader/lib/patch.js] ../~/react-hot-loader/lib/patch.js 214 bytes {0}
 [../node_modules/react-hot-loader/patch.js] ../~/react-hot-loader/patch.js 41 bytes {0}
 [../node_modules/react/react.js] ../~/react/react.js 56 bytes {0}
 [../node_modules/strip-ansi/index.js] ../~/strip-ansi/index.js 163 bytes {0}
 [../node_modules/url/url.js] ../~/url/url.js 25.8 kB {0}
 [../node_modules/webpack-dev-server/client/index.js?http:/localhost:8080] ../~/webpack-dev-server/client?http://localhost:8080/ 6.56 kB {0}
 [../node_modules/webpack-dev-server/client/overlay.js] ../~/webpack-dev-server/client/overlay.js 4.04 kB {0}
 [../node_modules/webpack-dev-server/client/socket.js] ../~/webpack-dev-server/client/socket.js 1.04 kB {0}
 [../node_modules/webpack/buildin/harmony-module.js] ../~/webpack/buildin/harmony-module.js 753 bytes {0}
    [0] multi webpack-dev-server/client?http://localhost:8080/ webpack/hot/dev-server react-hot-loader/patch ./src/index.js 64 bytes {0}
 [../node_modules/webpack/hot/dev-server.js] ../~/webpack/hot/dev-server.js 2.21 kB {0}
 [../node_modules/webpack/hot/emitter.js] ../~/webpack/hot/emitter.js 77 bytes {0}
 [../node_modules/webpack/hot/log-apply-result.js] ../~/webpack/hot/log-apply-result.js 1.2 kB {0}
 [./src/app.js] ./src/app.js 892 bytes {0} [built]
 [./src/index.js] ./src/index.js 787 bytes {0}
     + 446 hidden modules
webpack: Compiled successfully.
webpack: Compiling...
Hash: 861b7b616fa7df682818
Version: webpack 2.6.1
Time: 89ms
        Asset     Size  Chunks         Chunk Names
app.bundle.js  4.58 MB       0  [big]  main
chunk    {0} app.bundle.js (main) 1.63 MB [entry]
 [../node_modules/react-hot-loader/lib/patch.js] ../~/react-hot-loader/lib/patch.js 214 bytes {0}
 [../node_modules/react-hot-loader/patch.js] ../~/react-hot-loader/patch.js 41 bytes {0}
 [../node_modules/react/react.js] ../~/react/react.js 56 bytes {0}
 [../node_modules/strip-ansi/index.js] ../~/strip-ansi/index.js 163 bytes {0}
 [../node_modules/url/url.js] ../~/url/url.js 25.8 kB {0}
 [../node_modules/webpack-dev-server/client/index.js?http:/localhost:8080] ../~/webpack-dev-server/client?http://localhost:8080/ 6.56 kB {0}
 [../node_modules/webpack-dev-server/client/overlay.js] ../~/webpack-dev-server/client/overlay.js 4.04 kB {0}
 [../node_modules/webpack-dev-server/client/socket.js] ../~/webpack-dev-server/client/socket.js 1.04 kB {0}
 [../node_modules/webpack/buildin/harmony-module.js] ../~/webpack/buildin/harmony-module.js 753 bytes {0}
    [0] multi webpack-dev-server/client?http://localhost:8080/ webpack/hot/dev-server react-hot-loader/patch ./src/index.js 64 bytes {0}
 [../node_modules/webpack/hot/dev-server.js] ../~/webpack/hot/dev-server.js 2.21 kB {0}
 [../node_modules/webpack/hot/emitter.js] ../~/webpack/hot/emitter.js 77 bytes {0}
 [../node_modules/webpack/hot/log-apply-result.js] ../~/webpack/hot/log-apply-result.js 1.2 kB {0}
 [./src/app.js] ./src/app.js 892 bytes {0} [built]
 [./src/index.js] ./src/index.js 787 bytes {0}
     + 446 hidden modules
webpack: Compiled successfully.

Every time I tried to build after adding your loader I got problem like this:

ERROR in app/ad64cd4cb288185aae11.js from UglifyJs
Unexpected token: punc ()) [app/ad64cd4cb288185aae11.js:486,0]

With every file in build.

Prettier shouldn't be both a dependency and a peerDependency.

It'll force an install of prettier even if you have a higher versioned but still compatible package.

• I tried using the latest stable version of prettier-loader
• I've read readme
• Enhancement: speedup webpack start up by disabling prettier-loader (just for bootstraping)

In a project, i have a lot of HTML files defined as entry files thanks to html-webpack-plugin.
Loaders for HTML files are prettier-loader and html-loader.
Each HTML file needs 2 sec of processing by prettier (triggered by prettier-loader.

Cold start will go higher and higher everytime we add new entry HTML files.
As HTML are supposed to be prettified each time we save a file, the processing at startup is unneeded.
Disabling / skipping prettifying at startup would make the startup process way faster.

Naive (still working) approach: we could wait x milliseconds before enabling prettier.

let skip = true;
setTimeout(() => {
  console.log("prettier is now enabled")
  skip = false
}, 5000)

module.exports = async function(source, map) {
  this.cacheable();
  const callback = this.async();

  if (skip) {
    return callback(null, source, map);
  }

If reporting a bug:

• Steps to repeat:
  npm view prettier-loader versions

• Expected behavior:
  version 2.2.0 in the list

• Observed behavior:
  2.1.1 is last of major 2.