prettier-eslint
Advanced tools
The prettier-eslint npm package is a tool that combines the functionality of Prettier and ESLint. It allows developers to format their code using Prettier while also applying ESLint rules to ensure code quality and consistency. This package is particularly useful for projects that require both code formatting and linting.
Format and Lint Code
This feature allows you to format and lint your code using both Prettier and ESLint. The code sample demonstrates how to use the prettier-eslint package to format a piece of JavaScript code according to specified ESLint rules and Prettier options.
const prettierEslint = require('prettier-eslint');
const formatted = prettierEslint({
text: 'const foo = ( ) => { console.log("hello world") }',
eslintConfig: {
rules: {
semi: ['error', 'always'],
quotes: ['error', 'single']
}
},
prettierOptions: {
singleQuote: true
}
});
console.log(formatted);Custom Configuration
This feature allows you to use custom configuration files for ESLint and Prettier. The code sample shows how to load ESLint and Prettier configurations from external files and apply them to format and lint the code.
const prettierEslint = require('prettier-eslint');
const formatted = prettierEslint({
text: 'const foo = ( ) => { console.log("hello world") }',
eslintConfig: require('./.eslintrc'),
prettierOptions: require('./.prettierrc')
});
console.log(formatted);eslint-plugin-prettier is an ESLint plugin that integrates Prettier into your ESLint workflow. It allows you to run Prettier as an ESLint rule and report differences as individual ESLint issues. This package is useful for those who prefer to use ESLint as the single source of truth for code quality and formatting.
prettier-eslint-cli is a command-line interface for prettier-eslint. It provides a convenient way to format and lint files from the command line. This package is ideal for developers who prefer using CLI tools for their workflow.
Prettier is an opinionated code formatter that supports many languages and integrates with most editors. While it does not include linting capabilities, it can be used in conjunction with ESLint to achieve similar results as prettier-eslint.
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. It can be extended with plugins like eslint-plugin-prettier to include code formatting capabilities. ESLint is highly configurable and widely used for maintaining code quality.
Formats your JavaScript using prettier followed by eslint --fix
For files with an extension of .css, .less, or .scss,
this only runs prettier since eslint cannot process those.
The fix feature of eslint is pretty great and can auto-format/fix much of your code according to
your ESLint config. prettier is a more powerful automatic formatter. One of the nice things about prettier
is how opinionated it is. Unfortunately it's not opinionated enough and/or some opinions differ from my own. So after
prettier formats the code, I start getting linting errors.
This formats your code via prettier, and then passes the result of that to eslint --fix. This way you can get the
benefits of prettier's superior formatting capabilities, but also benefit from the configuration capabilities of
eslint.
This module is distributed via npm which is bundled with node and should be installed as one of your
project's devDependencies:
npm install --save-dev prettier-eslint
const format = require('prettier-eslint')
// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar'
const options = {
text: sourceCode,
eslintConfig: {
parserOptions: {
ecmaVersion: 7,
},
rules: {
semi: ['error', 'never'],
},
},
prettierOptions: {
bracketSpacing: true,
},
fallbackPrettierOptions: {
singleQuote: false,
}
}
const formatted = format(options)
// notice no semicolon in the formatted text
formatted // const { foo } = bar
The source code to format.
The path of the file being formatted can be used to override eslintConfig (eslint will be used to find the relevant
config for the file).
The config to use for formatting with ESLint. Can be overridden with filePath.
The options to pass for formatting with prettier. If not provided, prettier-eslint will attempt to create the
options based on the eslintConfig (whether that's provided or derived via filePath). You can also provide some of
the options and have the remaining options derived via your eslint config. This is useful for options like parser.
NOTE: these options override the eslint config. If you want fallback options to be used only in the case that the rule cannot be inferred from eslint, see "fallbackPrettierOptions" below.
The options to pass for formatting with prettier if prettier-eslint is not able to create the options based on the
the eslintConfig (whether that's provided or derived via filePath). These options will only be used in the case that
the corresponding eslint rule cannot be found and the prettier option has not been manually defined in prettierOptions.
If the fallback is not given, prettier-eslint will just use the default prettier value in this scenario.
prettier-eslint does quite a bit of logging if you want it to. Pass this to set the amount of logs you want to see.
Default is process.env.LOG_LEVEL || 'warn'.
By default, prettier-eslint will try to find the relevant eslint (and prettier) module based on the filePath. If
it cannot find one, then it will use the version that prettier-eslint has installed locally. If you'd like to specify
a path to the eslint module you would like to have prettier-eslint use, then you can provide the full path to it
with the eslintPath option.
This is basically the same as eslintPath except for the prettier module.
By default, prettier-eslint will run prettier first, then eslint --fix. This is great if you want to use prettier,
but override some of the styles you don't like using eslint --fix.
An alternative approach is to use different tools for different concerns. If you provide pretterLast: true, it will
run eslint --fix first, then prettier. This allows you to use eslint to look for bugs and/or bad practices, and use
prettier to enforce code style.
prettier-eslint will propagate errors when either prettier or eslint fails for one reason or another. In addition
to propagating the errors, it will also log a specific message indicating what it was doing at the time of the failure.
Code ➡️ prettier ➡️ eslint --fix ➡️ Formatted Code ✨
The eslintConfig and prettierOptions can each be provided as an argument. If
the eslintConfig is not provided, then prettier-eslint will look for them
based on the fileName (if no fileName is provided then it uses
process.cwd()). Once prettier-eslint has found the eslintConfig, the
prettierOptions are inferred from the eslintConfig. If some of the
prettierOptions have already been provided, then prettier-eslint will only
infer the remaining options. This inference happens in src/utils.js.
An important thing to note about this inference is that it may not support
your specific eslint config. So you'll want to check src/utils.js to see how
the inference is done for each option (what rule(s) are referenced, etc.) and
make a pull request if your configuration is supported.
Defaults if you have all of the relevant ESLint rules disabled (or have
ESLint disabled entirely via /* eslint-disable */ then prettier options will
fall back to the prettier defaults:
{
printWidth: 80,
tabWidth: 2,
singleQuote: false,
trailingComma: 'none',
bracketSpacing: true,
semi: true,
useTabs: false,
// prettier-eslint doesn't currently support
// inferring these two (Pull Requests welcome):
parser: 'babylon',
jsxBracketSameLine: false,
}
There is a lot of logging available with prettier-eslint. When debugging, you can use one of the logLevels to get a better idea of what's going on. If you're using prettier-eslint-cli then you can use the --log-level trace, if you're using the Atom plugin, then you can open the developer tools and enter: process.env.LOG_LEVEL = 'trace' in the console, then run the format. You'll see a bunch of logs that should help you determine whether the problem is prettier, eslint --fix, how prettier-eslint infers your prettier options, or any number of other things. You will be asked to do this before filing issues, so please do :smile:
NOTE: When you're doing this, it's recommended that you only run this on a single file because there are a LOT of logs :)
While using // eslint-disable-line, sometimes you may get linting errors after the code has been processed by this module. That is because prettier changes this:
if (x) { // eslint-disable-line
}
to this:
if (x) {
// eslint-disable-line
}
And the eslint --fix wont change it back. You can notice that // eslint-disable-line has moved to a new line. To work around this issue, you can use //eslint-disable-next-line instead of // eslint-disable-line like this:
// eslint-disable-next-line
if (x) {
}
None that I'm aware of. Feel free to file a PR if you know of any other solutions.
prettier-eslint-cli - Command Line Interfaceprettier-atom - Atom plugin (enable eslint intigration in settings)prettier-eslint-vscode - Visual Studio Code plugineslint-plugin-prettier - ESLint plugin. While prettier-eslint uses eslint --fix to change the output of prettier, eslint-plugin-prettier keeps the prettier output as-is and integrates it with the regular ESLint workflow.prettier-eslint-webpack-plugin - Prettier ESlint Webpack PluginThanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT
FAQs
Formats your JavaScript using prettier followed by eslint --fix
The npm package prettier-eslint receives a total of 778,705 weekly downloads. As such, prettier-eslint popularity was classified as popular.
We found that prettier-eslint demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
