So, I'm using vite, eslint and prettier for my React + Typescript project, and when I run eslint --ext .js,.jsx,.ts,.tsx,.json --ignore-path .eslintignore ., it fails on:
this is the file:
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}
PS.: I want it to be formatted that way!
This is my .eslintrc.js and .prettierrc.js respectively:
// .eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true
},
extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: 'module'
},
plugins: ['react', '#typescript-eslint', 'prettier'],
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
}
}
},
ignorePatterns: [
'node_modules/',
'coverage/',
'.editorconfig',
'package.json',
'tsconfig.json'
],
rules: {
'react/jsx-filename-extension': 'off',
'react/function-component-definition': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'import/extensions': ['error', 'never'],
'import/prefer-default-export': 'off',
'import/first': 'off',
'linebreak-style': ['error', 'unix'],
'lines-between-class-members': 'off',
'no-plusplus': 'off',
indent: ['error', 4],
'comma-dangle': ['error', 'never'],
'class-methods-use-this': 'off',
semi: 'off',
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: ['**/*.test.ts', '**/*.test.js', 'vite.config.ts']
}
]
}
};
// .prettierrc.js
module.exports = {
singleQuote: true,
arrowParens: 'always',
semi: true,
printWidth: 100,
tabWidth: 4,
trailingComma: 'none',
endOfLine: 'lf'
};
Oh, also, for prettier, everything is fine, that file doesn't trigger any errors on prettier. And I also did try using the eslint --fix cli, but it throws the exact same error...
What do I need to change?
Related
I have set up both prettier and eslint in my node.js project. But I am getting huge amounts of conflicts and syntax errors.
I followed dev.to documentation to set up prettier and eslint and make them compatible with each other.
// .eslintrc.js
module.exports = {
env: {
browser: true,
commonjs: true,
es2021: true,
},
extends: ['standard', 'prettier'],
overrides: [],
parserOptions: {
ecmaVersion: 'latest',
},
rules: {
'prettier/prettier': 'error',
quotes: ['error', 'single'],
semi: ['error', 'always'],
},
plugins: ['prettier'],
};
//.prettierrc.js
module.exports = {
trailingComma: 'es5',
tabWidth: 1,
semi: true,
singleQuote: true,
};
I've created a separate repo with shared eslint config for different projects in my org:
module.exports = {
parser: '#typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'airbnb-base',
'plugin:#typescript-eslint/recommended',
'prettier',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:jest/recommended',
'plugin:prettier/recommended',
],
plugins: ['#typescript-eslint', 'jest', 'prettier'],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
env: {
node: true,
es6: true,
jest: true,
},
rules: {
'eol-last': ['error', 'always'],
'newline-before-return': 'error',
'import/extensions': 0,
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: false,
optionalDependencies: false,
peerDependencies: false,
},
],
'no-restricted-imports': [
'error',
{
patterns: [
{
group: ['.prisma/*'],
message: 'Use #prisma instead of .prisma',
},
],
},
],
'semi': 'error',
'comma-dangle': 'off',
'#typescript-eslint/comma-dangle': ['error', 'always-multiline'],
'indent': 'off',
'quotes': 'off',
'#typescript-eslint/quotes': [
'error',
'single',
{
allowTemplateLiterals: true,
},
],
'#typescript-eslint/no-shadow': ['error'],
'arrow-parens': ['error', 'always'],
'#typescript-eslint/indent': [
'error',
2,
{
/**
* This should stay here until https://github.com/typescript-eslint/typescript-eslint/issues/1824 is fixed
* as currently it forces you to add additional double-space indent to function arguments with decorators
*/
ignoredNodes: ['FunctionExpression'],
SwitchCase: 1,
},
],
'#typescript-eslint/no-non-null-assertion': 'off',
'#typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: '^_',
},
],
'spaced-comment': ['error', 'always'],
'no-multiple-empty-lines': [
'error',
{
max: 2,
maxEOF: 0,
},
],
'import/order': [
'error',
{
'groups': [['external', 'internal', 'builtin'], ['sibling', 'parent'], 'index', 'object'],
'pathGroupsExcludedImportTypes': ['builtin'],
'newlines-between': 'always',
'alphabetize': {
order: 'asc',
caseInsensitive: true,
},
},
],
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
},
},
},
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'no-undef': 'off',
},
},
{
files: ['next.config.js'],
rules: {
'#typescript-eslint/no-var-requires': 'off',
},
},
],
};
Then I published this package to my private registry and installed it on the other repository where I used it to extend from in that repo's eslint config:
module.exports = {
extends: '#flaut-org/eslint-config',
ignorePatterns: ['.eslintrc.js'],
rules: {
'import/order': [
'error',
{
'groups': [['external', 'internal', 'builtin'], ['sibling', 'parent'], 'index', 'object'],
'pathGroups': [
{
pattern: '#nestjs/**',
group: 'external',
position: 'after',
},
],
'pathGroupsExcludedImportTypes': ['builtin'],
'newlines-between': 'always',
'alphabetize': {
order: 'asc',
caseInsensitive: true,
},
},
],
},
};
But for some reason autoformatting didn't work in VSCode. I've configured my default formatter to be Prettier - Code formatter and retried - didn't do the trick. Then I've added the following lines to my ./vscode/settings.json config:
{
"eslint.validate": [
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
And VSCode actually started auto-formatting it on Ctrl + S, but Alt + Shift + F combination still doesn't work. I've checked both Prettier and ESLint logs and there were no errors and warnings whatsoever. What am I missing that does not allow me to use Alt + Shift + F combination ?
I have a Svelte app with Vite bundler. My linter is Eslint with Prettier and vite-plugin-svelte plugins. Linting works well, but I want to make the app show all the linting errors inside Vite hmr overlay, same way it works with syntax errors as in this picture
My question is: Is it even possible to make something like that with Vite? I found nothing helpful about Vite's hmr overlay in the documentation, or maybe I just missing something in Eslint/Prettier config?
Here is config files:
.eslintrc :
{
"extends": ["eslint:recommended", "airbnb-base", "prettier"],
"plugins": ["svelte3", "prettier"],
"env": {
"es6": true,
"browser": true,
"node": true
},
"overrides": [
{
"files": ["*.svelte"],
"processor": "svelte3/svelte3"
}
],
"parserOptions": {
"project": "./jsconfig.json"
},
"rules": {
"prefer-arrow-callback": "off",
"arrow-body-style": "off",
"import/prefer-default-export": "off",
"import/no-anonymous-default-export": [
"error",
{
"allowArray": true,
"allowArrowFunction": false,
"allowAnonymousClass": false,
"allowAnonymousFunction": false,
"allowCallExpression": true,
"allowLiteral": false,
"allowObject": true
}
],
"dot-notation": "off"
}
}
.prettierrc.js
module.exports = {
arrowParens: 'always',
bracketSpacing: true,
endOfLine: 'lf',
printWidth: 80,
singleQuote: true,
tabWidth: 2,
trailingComma: 'all',
overrides: [
{
files: 'package*.json',
options: {
printWidth: 1000,
},
},
],
};
vite.config.js
export default defineConfig({
plugins: [
svelte({
preprocess: preprocess(),
}),
],
});
If it's possible to write your own vite plugin or modify the one in question, adding throw new Error(YOUR_ERROR) in the right plugin hook will trigger the overlay. e.g: modifying this example
https://vitejs.dev/guide/api-plugin.html#transformindexhtml
const htmlPlugin = () => {
return {
name: 'html-transform',
transformIndexHtml(html) {
// ADD THROW LINE
throw new Error("this will showup in an overlay")
}
}
}
Will lead to...
I have setup a new Vue 3 project with Eslint and Prettier config.
But when reformatting the HelloWorld.vue I see something ugly like this
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
rel="noopener"
target="_blank"
>babel</a
>
I want something more compact and still readable like this:
<a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" rel="noopener"
target="_blank">babel</a>
I searched for a while and also tried out things like "htmlWhitespaceSensitivity": "ignore" but nothing helps.
.eslintrs.js
module.exports = {
root: true,
env: {
node: true,
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'#vue/typescript/recommended',
'#vue/prettier',
'#vue/prettier/#typescript-eslint',
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? ['error', {allow: ['warn', 'error']}] : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
overrides: [
{
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
env: {
mocha: true,
},
},
],
}
.prettierrc
{
"trailingComma": "es5",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"bracketSpacing": false,
"printWidth": 120,
"jsxBracketSameLine": true,
"htmlWhitespaceSensitivity": "ignore"
}
My Solution
That I wouldn't name an answer, because it doesn't solve the problem with Prettier.
I don't use Prettier any more.
This is my current .eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/vue3-essential', '#vue/standard', '#vue/typescript/recommended'],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
'comma-dangle': ['error', 'always-multiline'],
'no-console': process.env.NODE_ENV === 'production' ? ['error', { allow: ['warn', 'error'] }] : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'quotes': ['error', 'single'],
'vue/html-quotes': ['error', 'double'],
},
overrides: [
{
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
env: {
jest: true,
},
},
],
}
Together with IntelliJ, this configuration leads to code formatting that looks pretty for me...
That formatting is controlled by Prettier's printWidth option. Since you're seeing the wrapping occur even with a printWidth of 120, the problem is likely that the particular line that <a> is on exceeds 120 characters, including surrounding whitespace (as seen in this demo).
Solution 1: Increase printWidth globally
Increase the printWidth value in .prettierrc to cover that line's character length (probably not the best idea, as it defeats the purpose of the option in your entire project).
Solution 2: Disable Prettier for line
Disable all Prettier rules for that particular line in <template>:
<!-- eslint-disable-next-line prettier/prettier -->
babel
Solution 3: Increase printWidth for the component
Use a component-specific printWidth config in <script> that accommodates an acceptable length (currently no way to configure from <template>):
<script>
/* eslint "prettier/prettier": ["warn", { "printWidth": 200 }] */
</script>
I am trying to solve a problem with battling formatting on save in VSCode.
I do not have prettier installed as a standalone extension. I have eslint installed. I am working with typescript files.
In my editor, I see a warning on trailing commas and when I hit save, I see the trailing comma vanish, then reappear. I realized that I have trailing comma set to "none" in my .eslintrc.js file and set to "always" in my .prettierrc.js file. They are both below.
My have Vetur installed as well, but I think I only have vetur running on save because my vsconfig file specifies this:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
But prettier is definitely being run twice. Is there some other setting I should be looking for? Or does eslint run prettier once for each set of config it finds.
Here is my eslintrc file:
module.exports = {
root: true,
env: {
node: true,
browser: true
},
extends: [
'plugin:vue/strongly-recommended',
'#vue/airbnb',
'#vue/typescript',
'plugin:prettier/recommended'
],
parserOptions: {
ecmaVersion: 2020,
parser: '#typescript-eslint/parser',
sourceType: 'module'
},
rules: {
'no-console': 'off',
'no-debugger': 'off',
'#typescript-eslint/no-empty-function': 'off',
'#typescript-eslint/no-namespace': 'off',
'#typescript-eslint/no-explicit-any': 'off',
'#typescript-eslint/no-non-null-assertion': 'off',
'#typescript-eslint/no-non-null-asserted-optional-chain': 'off',
'vue/component-name-in-template-casing': ['error', 'PascalCase'],
'vue/no-v-html': 'off',
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: true,
trailingComma: 'none',
printWidth: 100,
tabWidth: 2,
endOfLine: 'lf',
arrowParens: 'always',
bracketSpacing: true
}
]
},
overrides: [
{
files: ['**/*.test.ts'],
env: {
jest: true
}
}
]
};
and here is my .pretterrc.js file:
module.exports = {
semi: true,
trailingComma: 'all',
singleQuote: true,
printWidth: 100,
tabWidth: 2,
endOfLine: 'lf',
arrowParens: 'always',
bracketSpacing: true
};
I know that I could just make the two files consistent and I will get the proper output, but I don't want the formatting to be run twice. Working with typescript files seems to be slow enough as it is without formatting twice all the time.
I think the relevant portions of my settings.json file are:
"eslint.alwaysShowStatus": true,
"eslint.validate": [
"vue",
"html",
"javascript",
"typescript"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"editor.formatOnSave": true,
"vetur.experimental.templateInterpolationService": true,
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.format.defaultFormatter.ts": "prettier-tslint",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": true,
"sortAttributes": true
},
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
}
},
Any pointers of which settings to look at would be appreciated.
I believe I have found the answer.
The first round of prettying is done by eslint and it uses the prettier config found in eslintrc.
The second round of prettying is done by vetur on the typescript section of the vue file and it uses the prettier config found in the prettierrc file.
What I did to fix the problem is to tell vetur not to format the typescript code by changing these two lines in the settings.json file for the workspace:
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.ts": "none",
These were prettier-eslint previously. Once I changed these to none, the typescript portion of the file removed the trailing commas and left them removed. The html template portion of the file was still formatted properly.
I assume this will speed up my file save since vetur can now ignore the typescript portion of the file when saving since it has already been processed by eslint.
You don't need to put the prettier config in the .eslintrc file, as the latest version of ESLint-plugin-prettier will load it from .prettierrc