I'm having problems getting prettier, eslint and visual studio code play nice together. I keep seeing red errors such as this in VSCode:
[eslint] Replace `↹` with `··` (prettier/prettier)
I have VSCode plugins eslint and prettier installed.
VSCode config
{
"javascript.validate.enable": false,
"javascript.format.enable": false,
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"window.zoomLevel": -1,
"editor.fontSize": 13
}
.eslintrc
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:react-native/all",
"prettier",
"prettier/react",
"prettier/standard"
],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"mocha": true,
"jest": true,
"es6": true
},
"globals": {
"expect": true,
"sinon": true,
"Promise": true,
"__DEV__": true
},
"plugins": ["babel", "react", "react-native", "prettier"],
"settings": {
"import/resolver": {
"node": {
"paths": ["app"]
}
}
},
"rules": {
"prettier/prettier": ["error"],
"indent": [2, "tab", { "SwitchCase": 1 }],
"comma-dangle": [2, "only-multiline"],
"react/jsx-indent": [0, "tab"],
"jsx-quotes": [2, "prefer-double"],
"react/display-name": 0,
"react/jsx-boolean-value": 1,
"react/jsx-no-undef": 2,
"react/jsx-sort-prop-types": 0,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/jsx-filename-extension": 0,
"react/no-did-mount-set-state": 2, // [2, "allow-in-func"],
"react/no-did-update-set-state": 2,
"react/no-multi-comp": 0,
"react/no-unknown-property": 2,
"react/prop-types": 1,
"react/react-in-jsx-scope": 2,
"react/self-closing-comp": 1,
"react/sort-comp": 2,
"react/jsx-wrap-multilines": 2,
"react-native/no-color-literals": 1,
"quotes": [
2,
"single",
"avoid-escape"
]
}
}
dev dependencies package.json
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^7.2.3",
"babel-plugin-module-resolver": "3.0.0-beta.5",
"babel-plugin-react-intl": "^2.3.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-preset-airbnb": "^2.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-register": "^6.24.1",
"chai": "^4.1.0",
"chai-as-promised": "^7.1.1",
"chai-enzyme": "^0.8.0",
"chai-immutable": "^1.6.0",
"commitizen": "^2.9.6",
"cz-conventional-changelog": "^2.0.0",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"enzyme-to-json": "^3.1.4",
"eslint": "^4.7.2",
"eslint-config-airbnb": "^15.1.0",
"eslint-config-prettier": "^2.7.0",
"eslint-plugin-babel": "^4.1.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-react": "^7.4.0",
"eslint-plugin-react-native": "^3.1.0",
"eslint-plugin-standard": "^3.0.1",
"expect.js": "^0.3.1",
"flow": "^0.2.3",
"flow-bin": "^0.56.0",
"immutablediff": "^0.4.3",
"jest": "^21.2.1",
"jshint": "^2.9.5",
"mocha": "^3.4.2",
"prettier-eslint": "^8.2.1",
"react-addons-test-utils": "^15.6.2",
"react-dom": "16.0.0-beta.5",
"react-intl-cra": "^0.2.8",
"react-native-mock": "^0.3.1",
"react-test-renderer": "^16.0.0",
"redux-debounce": "^1.0.1",
"redux-debounced": "^0.4.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-mock-store": "^1.2.3",
"regenerator-runtime": "^0.11.0",
"remote-redux-devtools": "^0.5.12",
"sinon": "^4.0.0"
}
You have to install eslint-config-prettier package and in your eslint config file add prettier to the extends array
{
extends: ['prettier']
}
The solution I found was to modify the Visual Studio Code settings to format files when saving "editor.formatOnSave": true and run ESLint when saving files "eslint.run": "onSave". You can find a more detailed explanation at Prettier Formatter for Visual Studio Code.
npm run lint -- --fix
It's ok for me but you have to deactivate the Prettier extension to avoid conflicts.
When I used this part into .eslintrc file, that works for my code.
"extends": [
"plugin:react/essential",
],
Solved using fix
yarn run lint --fix
Had the same issue.
{
"useTabs": false
}
This fixed my issue
Related
I have a React project, and am having an issue with saving automatically in VSCode.
It works for Typescript files, but I am getting the following error:
"Extension 'Eslint' is configured as formatter but it cannot format 'Javascript'-files
I have looked at some other posts and tried configuring the settings.json explicitly for Javascript files as well, but that did not work.
My settings.json is as follows:
{
"workbench.colorTheme": "Webstorm IntelliJ Darcula Theme",
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true,
"diffEditor.ignoreTrimWhitespace": false,
"typescript.updateImportsOnFileMove.enabled": "always",
// enable for eslint-plugin json-format
"eslint.validate": [
"json"
],
"window.zoomLevel": 1,
"i18n-ally.localesPaths": [
"src/translations"
],
"i18n-ally.keystyle": "nested",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
My eslintrc.json is as follows:
{
"parser": "#typescript-eslint/parser",
"extends": ["eslint:recommended", "next/core-web-vitals", "plugin:#typescript-eslint/recommended", "plugin:storybook/recommended", "plugin:react/recommended"],
"plugins": ["unused-imports", "#typescript-eslint", "json-format"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
"rules": {
"import/order": [
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
}
],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
],
"semi": "error",
"no-unused-vars": "off",
"object-curly-spacing": ["error", "always"],
"unused-imports/no-unused-imports": "error",
"unused-imports/no-unused-vars": [
"warn",
{ "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
],
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0, "maxBOF": 0 }],
"brace-style": ["error", "1tbs"],
"indent": ["error", 2],
"max-len": [
"warn",
{
"code": 80,
"tabWidth": 2,
"comments": 80,
"ignoreComments": false,
"ignoreTrailingComments": true,
"ignoreUrls": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true,
"ignoreRegExpLiterals": true
}
],
"jsx-quotes": ["error", "prefer-double"],
"quotes": ["error", "single"],
"space-infix-ops": ["error"],
"#typescript-eslint/no-explicit-any": "error",
"#typescript-eslint/type-annotation-spacing": "error",
"react/jsx-sort-props": [
2,
{
"callbacksLast": true,
"shorthandFirst": false,
"shorthandLast": true,
"ignoreCase": true,
"noSortAlphabetically": false
}
],
"react/react-in-jsx-scope": "off",
"newline-before-return": "error"
}
}
],
"env": {
"jest": true
}
}
My package.json includes the following dependencies:
"dependencies": {
"#emotion/cache": "^11.7.1",
"#emotion/react": "^11.9.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.8.1",
"#mui/icons-material": "^5.6.1",
"#mui/material": "^5.6.1",
"next": "12.1.4",
"next-i18next": "^11.0.0",
"react": "18.0.0",
"react-dom": "18.0.0"
},
"devDependencies": {
"#babel/core": "^7.17.9",
"#storybook/addon-actions": "^6.4.21",
"#storybook/addon-essentials": "^6.4.21",
"#storybook/addon-interactions": "^6.4.21",
"#storybook/addon-links": "^6.4.21",
"#storybook/builder-webpack5": "^6.4.21",
"#storybook/manager-webpack5": "^6.4.21",
"#storybook/react": "^6.4.21",
"#storybook/testing-library": "^0.0.9",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.0.1",
"#types/node": "17.0.23",
"#types/react": "18.0.1",
"#types/react-dom": "18.0.0",
"#typescript-eslint/eslint-plugin": "^5.19.0",
"#typescript-eslint/parser": "^5.19.0",
"babel-jest": "^27.5.1",
"babel-loader": "^8.2.4",
"chromatic": "^6.5.4",
"cz-conventional-changelog": "^3.3.0",
"cz-emoji": "^1.3.1",
"eslint": "^8.13.0",
"eslint-config-next": "12.1.4",
"eslint-plugin-json-format": "^2.0.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-storybook": "^0.5.8",
"eslint-plugin-unused-imports": "^2.0.0",
"husky": "^7.0.4",
"jest": "^27.5.1",
"typescript": "^4.6.3"
}
Maybe add "javascript" to your "eslint.validate" setting:
{
"workbench.colorTheme": "Webstorm IntelliJ Darcula Theme",
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"eslint.format.enable": true,
"diffEditor.ignoreTrimWhitespace": false,
"typescript.updateImportsOnFileMove.enabled": "always",
// enable for eslint-plugin json-format
"eslint.validate": ["json", "javascript"],
"window.zoomLevel": 1,
"i18n-ally.localesPaths": [
"src/translations"
],
"i18n-ally.keystyle": "nested",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
I am new in eslint and prettier. I have this simple example, when i use "tabWidth": 4 in .prettierrc.json file. i saw error.I order to not have conflicts between them, i installed the eslint-config-prettier. But i still get errors.
Files:
1. App.js
import React, { useState } from "react";
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const lea = 15;
const loginHandler = (email, password) => {
setIsLoggedIn(true);
};
const logoutHandler = () => {
setIsLoggedIn(false);
};
return (
<>
<MainHeader isAuthenticated={isLoggedIn} onLogout={logoutHandler} />
<main>
{!isLoggedIn && <Login onLogin={loginHandler} />}
{isLoggedIn && <Home onLogout={logoutHandler} />}
</main>
</>
);}
export default App;
2. .eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:prettier/recommended",
"eslint:recommended",
"prettier"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"parser": "babel-eslint",
"plugins": ["react", "prettier"],
"rules": {
"prettier/prettier": ["error"]
}}
3. .prettierrc.json
{
"arrowParens": "always",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 86,
"proseWrap": "preserve",
"quoteProps": "preserve",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 4,
"trailingComma": "es5",
"useTabs": false,
"vueIndentScriptAndStyle": false}
4. package.json
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.4.1"
}}
5. error image
enter image description here
My Vue 3 app doesn't work in Safari 9. There is this error in console:
Unexpected keyword 'const'. Const declarations are not supported in strict mode.
My package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.12.1",
"#babel/runtime-corejs2": "^7.12.5",
"axios": "^0.21.0",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-axios": "^3.1.3",
"vue-slider-component": "^4.0.0-beta.3"
},
"devDependencies": {
"#vue/babel-preset-app": "^4.5.8",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"sass": "^1.28.0",
"sass-loader": "^10.0.5"
},
"eslintConfig": {
"rules": {},
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"last 2 versions",
"safari >= 7",
"ios_saf >= 8",
"chrome >= 52"
]
}
My babel.config.js:
module.exports = {
presets: [
['#vue/babel-preset-app']
]
}
I know that the error can be caused by not-transpiled dependencies, but I tried to transpile them in vue.config.js by transpileDependencies option. But doesn't work neither.
So here's an answer for my question: https://github.com/vuejs/vue-cli/issues/6041#issuecomment-722966178
Vue 3 doesn't support iOS 9 yet.
I'm having a super annoying issue where a settings conflict of some sort is preventing the lint from adjusting the file as it should. I am using Wes Bos' ESLint/Prettier configuration. For example, I have a Vue file:
<script>
import { mapState, mapActions } from "vuex";
export default {
data: () => ({
valid: false <-------- Also receive eslint(comma-dangle) error here
}),
computed: {
...mapState("account", ["status"]),
},
methods: {
...mapActions("account", ["login", "logout"]),
},
created() {}
};
</script>
However in my .eslintrc I have this rule, because I prefer script code to be indented once:
"vue/script-indent": [
"warn",
2,
{
"baseIndent": 1
}
],
When I save the file to allow Prettier to reformat and fix those errors, I can see the comma-dangle and indent issues be fixed for a split second before they revert back and show all of the errors again. Where is the conflict occurring?
ESLint/Prettier is very new to me, and I'm just trying to get a good system in place! Any help would be greatly appreciated.
Other related files:
VSCode settings.json
{
"breadcrumbs.enabled": true,
"editor.autoClosingBrackets": "always",
"editor.autoClosingQuotes": "always",
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.fontFamily": "FiraCode-Retina",
"editor.fontWeight": "500",
"editor.letterSpacing": 0.5,
"editor.lineHeight": 20,
"editor.minimap.enabled": false,
"editor.tabSize": 2,
"emmet.includeLanguages": {
"erb": "html",
"javascript": "javascriptreact",
"vue-html": "html",
"vue": "html",
"scss": "scss"
},
"files.associations": {
"*.js.erb": "javascript"
},
"gitlens.codeLens.authors.enabled": false,
"gitlens.codeLens.recentChange.enabled": false,
"gitlens.hovers.currentLine.over": "line",
"html.format.indentInnerHtml": true,
"javascript.preferences.quoteStyle": "single",
"search.useReplacePreview": false,
"terminal.integrated.fontWeightBold": "normal",
"workbench.colorTheme": "Atom One Dark",
"workbench.editor.tabCloseButton": "left",
"workbench.iconTheme": "material-icon-theme",
"vim.statusBarColors.normal": "#f4f4f4",
// These are all my auto-save configs
"editor.formatOnSave": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
// tell the ESLint plugin to run on save
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
"prettier.disableLanguages": [
"javascript",
"javascriptreact"
],
}
package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve",
"build": "vue-cli-service build --mode production",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vuex-orm/core": "0.33.0",
"#vuex-orm/plugin-axios": "^0.7.0",
"axios": "^0.19.0",
"convert-units": "^2.3.4",
"core-js": "^2.6.5",
"dayjs": "^1.8.16",
"echarts": "^4.3.0",
"fibers": "^4.0.1",
"lodash": "^4.17.15",
"material-design-icons-iconfont": "^5.0.1",
"sass": "^1.23.0",
"sass-loader": "7.1.0",
"vee-validate": "^3.0.11",
"vue": "^2.6.10",
"vue-headful": "^2.0.1",
"vue-router": "^3.0.3",
"vuedraggable": "^2.23.2",
"vuetify": "2.1.9",
"vuex": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.0",
"#vue/cli-plugin-eslint": "^3.12.0",
"#vue/cli-service": "^3.12.0",
"#vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-cli-plugin-vuetify": "^1.0.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.2.2"
}
}
I think the cause of the conflict is this setting in settings.json:
"editor.formatOnSave": true,
the editor is set to "editor.tabSize": 2, and the default prettier setting is
"none" for the trailing comma. So it must be overriding whatever settings you had for eslint that runs on save. You can try setting:
"editor.formatOnSave": false,
alternatively you can change the editor.tabSize setting and add
"prettier.trailingComma": "es5",
Same issue, it's working for me.
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
I'm trying to use an additional babel plugin when running Ava to transpile react dynamic imports so they can run on node (based on this response)
ava dynamic syntax import enable support
I cannot add it to my main .babelrc file as we are implementing bundle splitting in webpack.
To get around this I'm trying to include the plugin through ava's babel configuration. When I run ava, babel does not use the additional plugin.
package.json
{
"dependencies": {
"babel-cli": "6.16.0",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-dynamic-import-node": "^2.1.0",
"babel-plugin-flow-react-proptypes": "^5.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-recharts": "1.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-node": "^6.1.1",
"babel-preset-react": "6.16.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-preset-env": "^1.7.0",
"babel-register": "6.16.3"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill",
"ignore-styles"
],
"babel": {
"plugins": [
"babel-plugin-dynamic-import-node"
]
}
}
}
.babelrc
{
"plugins": [
["babel-plugin-transform-builtin-extend", {
"globals": ["Error"]
}],
"recharts",
"transform-object-rest-spread",
"flow-react-proptypes",
"transform-flow-strip-types",
"transform-async-to-generator",
"transform-class-properties",
"syntax-dynamic-import",
"react-hot-loader/babel",
[
"module-resolver",
{
"root": ["./src"],
"alias": {
"tests": "./tests"
}
}
]
],
"presets": ["env", "react"]
}
0.24 is quite old. The latest version for Babel 6 is 0.25, but if possible you should upgrade to Babel 7 and use the latest AVA 1.0 beta.