VS Code project code formatting using ESLint - visual-studio-code

I'm using VS Code for a React project and have VS Code configured to format on save and to Require a 'prettierconfig' to format (the Prettier: Require Config setting from the VSCode Prettier extension). I also have the ESLint plugin enabled.
That seems to mean my project's .prettierrc config file drives the formatting on save and .eslintrc.json provides linting warnings. But in at least one case (below) some formatting issues are left unresolved on save.
The code below, as formatted, shows eslint(indent) squiggly warnings in VS Code. Upon save (Ctrl + S), some get resolved, but some do not.
Specifically, the incorrect indent spacing of the first <div> gets fixed on save and that eslint(indent) warning disappears. However, the later eslint(indent) warnings do NOT get resolved on save. But they DO, however, get resolved when (on Windows) I click Ctrl +Shift+ P, then find and click the "ESLint: Fix all auto-fixable Problems".
When I save the file again those changes are reverted and the warning appears again.
So "format on save" applies different formatting than "ESLint: Fix all auto-fixable Problems". Is there a way to reconcile these? I would like all the eslint(indent) issues to resolve on save.
Does anyone know what ESLint settings drive "ESLint: Fix all auto-fixable Problems"?
const MyModule = () => {
...
return (
// "eslint(indent)" warning on next line gets resolved on save
<div>
{!menus.find(function(permission) {
return permission.level === 'ADMIN';
}) ? (
// "eslint(indent)" warnings below DO NOT get resolved on save
// ... but they DO get resolved on "ESLint: Fix all auto-fixable problems"
// ... then they reappear on save
<div>
<Redirect to="/" />
</div>
) : (
<div>
<Results />
</div>
)}
</div>
);
};
export default MyModule;
My .eslintrc.json contents:
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier",
"prettier/react"
],
"rules": {
"react/prop-types": 0,
"no-console": 1,
"no-control-regex": 0,
"indent": ["warn", 2],
"quotes": ["warn", "single"],
"space-in-parens": 1,
"prefer-destructuring": 0,
"prefer-const": 0
},
"parser": "babel-eslint",
"plugins": ["react", "import", "jsx-a11y"],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
My .prettierrc:
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}

Like the other posted suggested, I use a setup where eslint runs prettier for me. I already had prettier disabled for my js/ts files so I knew that wasn't the issue. It turns out it was the built in formatter for vscode and turning off editor.formatOnSave fixed the issue.
My project's settings.json. This disables the formatter only for typescript files. Eslint will still fix your files as long as you have the eslint auto fix settings enabled.
{
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
}
}
Rather than turning off formatOnSave, you could instead set the default formatter to eslint:
{
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
Here are the rest of my settings just for reference.
My user settings.json
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"prettier.disableLanguages": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"markdown"
]
}
.eslintrc
{
"root": true,
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"project": "tsconfig.json",
"warnOnUnsupportedTypeScriptVersion": false
},
"plugins": ["#typescript-eslint", "jest", "prettier"],
"extends": [
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint"
],
"rules": {
"prettier/prettier": [
"error",
{
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 110
}
]
}
}

Instead of using both prettier and eslint formatters, just use the eslint formatter and add your prettier options inside your eslintrc file. Here's an example
https://prettier.io/docs/en/integrating-with-linters.html
// .eslintrc.json
...
"rules": {
"prettier/prettier": [
1,
{
"useTabs": false,
"printWidth": 120,
"tabWidth": 2,
"singleQuote": true
}
]
}
...

Related

VSCode removing React from imports on save

after switching to vscode 1.68.1
every time on saving the file its automatically removing the React from the import
at first i though this could be an eslint issue as i am using eslint for formatting but after removing eslint plugin issue remains the same
here is my settings.json
{
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"files.eol": "\r\n",
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"prettier.arrowParens": "avoid",
"prettier.embeddedLanguageFormatting": "off",
"prettier.enable": false,
"eslint.format.enable": false,
"[css]": {
"editor.defaultFormatter": "aeschli.vscode-css-formatter"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
and here is the .eslintrc
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react", "react-hooks"
],
"rules": {
"linebreak-style": ["error", "windows"],
"react/forbid-prop-types": 0,
"react/prop-types": 0,
"max-len": ["error", { "code": 220 }]
},
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
};
Try adding these rules in eslintrc:
{
"rules": {
"react/jsx-uses-react": 0,
"react/react-in-jsx-scope": 0
}
}
OR
Try adding "jsx": "react" to your jsconfig:
{
"compilerOptions": {
"baseUrl": ".",
"jsx": "react",
"paths": {
"*": ["*", "src/*"]
}
}
}
This helps VS-Code understand that React is implicitly referenced by the jsx elements in your file.
I had the same problem in multiple projects, after adding these rules, solves the problem for me.
VS Code expects that every project declares a tsconfig.json or jsconfig.json and if none is provided, it defaults it to
{
"compilerOptions": {
"jsx": "react"
}
}
This effectively means that if you have React imports in your code, they will be preserved.
To adopt the latest react 17+ standard with the _jsx transform, the environment type needs to be react-jsx.
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "on",
"react/react-in-jsx-scope": "on"
}
}
Add these rules to your eslint config
add type on your tsx file, to prevent removed automatically by vscode
import React from 'react';
type _react = typeof React
.eslint
{
rules: {
'react/jsx-uses-react': 0, // ignore validation must include react scope in jsx/tsx
'react/react-in-jsx-scope': 0, // ignore validation must include react scope in jsx/tsx
'no-unused-vars': 'off', // disable default eslint unused variable
'#typescript-eslint/no-unused-vars': [ // ignore validation variable with prefix _
'warn',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_'
}
]
}
}
I also had the same problem, when removing the extensions I found it was vscode, downgrading to version 1.67.2 solved it
Try removing the "source.organizeImports": true line from your settings, or setting it to false.
I think VS Code thinks the React import is unnecessary because its only used implicitly (which can be a problem if your compiler requires an explicit import to bundle correctly).

Visual studio Code autoimport doesn't work

I am using VSCode autoimport on daily basis with this extension
soates autoimport.
https://github.com/soates/Auto-Import/issues/104.
It suddenly stopped to work. I have tried reinstall vscode, changing extension version, disabling plugins, clearing cache ...etc
I have tried this https://www.youtube.com/watch?v=1yu5tB4KOis and also tried add
checkjs: true to my jsconfig.json. Its very hard to live without auto import.
these are my settings.json
{
"dart.flutterSdkPath": "C:\\Users\\rolni\\AppData\\Roaming\\flutter_windows_v1.12.13+hotfix.9-stable\\flutter\\bin",
"explorer.confirmDelete": false,
"workbench.colorCustomizations": {
"[Material Theme Darker]": {
"statusBar.debuggingBackground": "#212121"
}
},
"material-icon-theme.folders.associations": {
"global_state": "global",
"ui": "layout",
"bloc": "controller"
},
"workbench.iconTheme": "material-icon-theme",
"debug.node.autoAttach": "on",
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace",
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"notebook.kernelProviderAssociations": [],
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top",
"explorer.confirmDragAndDrop": false,
"javascript.updateImportsOnFileMove.enabled": "always",
"highlight-matching-tag.customEmptyElements": null,
"emmet.excludeLanguages": [
"markdown"
],
"emmet.includeLanguages": {
"javascript": "html"
},
"autoimport.filesToScan": "**/*.{ts,tsx,js,jsx}",
"autoimport.showNotifications": true,
"extensions.ignoreRecommendations": true,
"workbench.editor.enablePreview": false,
"outline.showVariables": false,
"debug.javascript.autoAttachFilter": "disabled",
"debug.javascript.terminalOptions": {
"trace": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"terminal.integrated.shell.windows": "C:\\Program Files\\PowerShell\\7-preview\\pwsh.exe",
"debug.onTaskErrors": "debugAnyway",
"[go]": {
"editor.insertSpaces": false
},
"go.formatTool": "gofmt",
"go.useLanguageServer": true,
"gopls": {
"usePlaceholders": true, // add parameter placeholders when completing a function
},
"todo-tree.tree.showScanModeButton": false,
"todo-tree.highlights.customHighlight": {
"TODO": {
"icon": "check",
"type": "line",
"iconColour": "yellow",
"foreground": "red",
"background": "yellow"
},
"FIXME": {
"icon": "beaker",
"iconColour": "red",
"foreground": "white",
"background": "red"
}
},
"debug.inlineValues": true,
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"tabnine.experimentalAutoImports": true,
"gitlens.hovers.currentLine.over": "line",
"terminal.integrated.tabs.enabled": true,
"go.toolsManagement.autoUpdate": true,
"workbench.colorTheme": "Material Theme",
"git.enableSmartCommit": true,
"todo-tree.general.tags": [
"BUG",
"HACK",
"FIXME",
"TODO",
"XXX",
"[ ]",
"[x]"
],
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
"terminal.integrated.defaultProfile.windows": "PowerShell",
"editor.formatOnSave": true,
}
Can't also debug extension all my breakpoints are unbound...can't figure out how to debug it to find root cause of problem.
This log is in my output Log (Extension Host)
[error] [vscode.json-language-features] provider FAILED
[2021-07-05 13:23:44.550] [exthost] [error] Canceled: Canceled
at b.makeCancelError (c:\Users\rolni\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\json-language-features\client\dist\node\jsonClientMain.js:1:64563)
at b.handleFailedRequest (c:\Users\rolni\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\json-language-features\client\dist\node\jsonClientMain.js:1:64414)
at c:\Users\rolni\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\json-language-features\client\dist\node\jsonClientMain.js:1:24756
EDIT:
I have tried remove plugins, directories, settings, but still
autoimport extension is not enabled even it says yes. Its even missing
the log in extension host output.
For JavaScript projects
VSCode in general starts to fail after a while, it OFTEN doesn't suggest imports from package dependencies and even starts to stop hinting auto import for local project src folder files...
As soon as you open the file it will all of a sudden become available...
It's not a plugin issue, it's just VS code, it's starting to get bloated...
For TypeScript projects
It's not so bad, they seem mainly focused on TS these days, but when it goes wrong it goes wrong. I've started un-installing, go to install folders make sure nothing is there and re-install and it works again. No login sync.
Alternative (which I am not a fan off but just works... grrr)
PHPStorm / WebStorm, it gets the import right every time.
And ctrl click on sub methods of class's will auto open that file and locate you on that method. VSCode will just open that file, if it can find it...
With auto complete (in JS Projects) on variables assigned to a class. I think VS Code will only do that if the file is open in the editor.
I keep both open now, VSCode for speed of editing but when (not if) VSCode start to play up, I switch over. Also for the stacking of file tabs feature in PHPStorm instead of a scroll bar of tabs. I find it easier to just switch over to PHPStorm and back again instead of that scroll thing.

ESLint rule conflicts with Prettier rule

I am totally new to VSCode and this is my first setting. I know that this is a very common problem but I couldn't find a suitable solution for it.
This is my understanding so far. Please correct me if I am wrong.
I want to use ESLint for finding errors in Javascript code and Prettier for formatting all languges. But it seems that we could also format our javascript code with ESLint! There are some useful rules that I like to use it and it seems Prettier don't have those like ( space-in-parens ).
So I decided to use ESLint as my formatter in Javascript. Now I can see that there are a lot of tutorial for "How to integrates ESLint with Prettier" in web. The idea is to extend Prettier rules with a plugin and add those ESLint specific rules to it. Reasonable!
I ended up with the following settings. Please take a look at my settings for using ESLint and Prettier below:
my eslint config file:
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ["prettier"],
globals: {
Atomics: "readonly",
SharedArrayBuffer: "readonly",
},
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
},
plugins: [
"prettier"
],
"rules": {
"space-in-parens": ["error", "always"],
"quotes": ["error", "single"],
"prettier/prettier": "error"
}
};
my user setting file:
{
"terminal.integrated.shellArgs.linux": [
"-l"
],
"remote.SSH.remotePlatform": {
"dev-all": "linux"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
// turn it off for JS and JSX, we will do this via eslint
"[javascript]": {
"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"
]
}
and finally my package.json file:
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-prettier": "^3.1.3",
"prettier": "^2.0.4"
}
}
Now the problem is that whenever I save my javascript code, formatting toggles! for example with the first save, I have "single quote" and with the next save I have "double quote". I thinks my understanding of the whole idea is wrong. Could you explain it for me and tell me how to correct it. I am spending so much time to figure it. By the way, I have also installed two extensions in vscode: "ESLint" and "Prettier".
This is potentially because of conflicting rules between ESLint and Prettier plugins. Now you have two options
Either let ESLint know that you want to use Prettier as a formatter.
https://dev.to/s2engineers/how-to-make-eslint-work-with-prettier-avoiding-conflicts-and-problems-57pi
2.You can configure ESlint and Prettier together and resolve the conflicting
rules without any conflicts.
https://blog.theodo.com/2019/08/empower-your-dev-environment-with-eslint-prettier-and-editorconfig-with-no-conflicts/
I have decided to let ESLint do formatting for me in JavaScript and prettier for all other languages. You could find my setting on my git.
To solve conflict
install eslint configuration for prettier
npm install eslint-config-prettier
And include it in the extends option in the file .eslintrc.js
extends: [
...,
"prettier",
],
You can follow these settings by Sumit Saha. Your conflicting will be gone. These settings give more power to eslint over prettier. I am copy-pasting those.
In the .vscode/settings.json file :
{
// config related to code formatting
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"[javascriptreact]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": null
},
"javascript.validate.enable": false, //disable all built-in syntax checking
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.tslint": true,
"source.organizeImports": true
},
"eslint.alwaysShowStatus": true,
// emmet
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
And, in the .eslintrc file:
{
"extends": [
"airbnb",
"airbnb/hooks",
"eslint:recommended",
"prettier",
"plugin:jsx-a11y/recommended"
],
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 8
},
"env": {
"browser": true,
"node": true,
"es6": true,
"jest": true
},
"rules": {
"react/react-in-jsx-scope": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": 0,
"react/state-in-constructor": 0,
"indent": 0,
"linebreak-style": 0,
"react/prop-types": 0,
"jsx-a11y/click-events-have-key-events": 0,
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", ".jsx"]
}
],
"prettier/prettier": [
"error",
{
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4,
"semi": true,
"endOfLine": "auto"
}
]
},
"plugins": ["prettier", "react", "react-hooks"]
}
Well, I am happy with TSLint along with ESLint.
And I have a habit of doing Ctrl+Shift+F often during writing code.
Also, you can try indent-rainbow, bracket pair colorizer and my favourite, peacock.

VSCode Settings, EsLint and Prettier conflict

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
}
}

Set HTML Before Script Tags in Svelte on VS Code

I am using the Svelte Plugin for vs code: https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
I also have the eslint and prettier plugins installed:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
In addition, I have set up .eslintrc.js and .prettierrc files as follows:
// .eslintrc.js
module.exports = {
env: {
browser: true,
es6: true
},
extends: ['prettier'],
overrides: [
{
files: ['**/*.svelte'],
processor: 'svelte3/svelte3'
}
],
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module'
},
plugins: ['prettier', 'svelte3'],
rules: {
'prettier/prettier': 'error',
'svelte3/lint-template': 2
}
}
// .prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"plugins": [
"svelte"
],
}
Now everything seems to work like it supposed to. But there is one functionality that I would like to change. I would like to have my html on top of the style tags in my .svelte file (and, if possible, also on top of the script tags).
However, when I click on save, it automatically moves all of my html to the bottom of the file.
How can I override this?
Thanks.
prettier-plugin-svelte has a svelteSortOrder option, that can be added to your .prettierrc file.
In your case, it would become:
// .prettierrc
{
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"plugins": [
"svelte"
],
"svelteSortOrder": "scripts-markup-styles"
}