I had linting working on a previous computer properly, but when I moved to a different one when it crashed, linting has been very sketchy. The lines below have my configuration, sorry it is mostly code.
Vue files don’t format on save, if they are missing a semi-colon, they stay that way. I attempted to update all the prettier and eslint config, but it’s only made it worse. Now I get bogus “missing ‘>'” on vue templates, it’s not parsing them as templates.
vsCode settings.json:
{
"workbench.colorTheme": "Default Dark+",
"workbench.editor.enablePreviewFromQuickOpen": true,
"editor.tabSize": 2,
"eslint.format.enable": true,
"eslint.codeActionsOnSave.rules": null,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "always"
},
"editor.formatOnSave": true,
"prettier.singleQuote": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
],
"editor.stickyScroll.enabled": false
}
.eslintrc.cjs:
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');
module.exports = {
root: true,
env: {
node: false,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'@vue/eslint-config-prettier/skip-formatting',
],
overrides: [
{
files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}'],
extends: ['plugin:cypress/recommended'],
},
],
rules: {
eqeqeq: 'error',
"prettier/prettier": [
"error",
{
singleQuote: true,
semi: true,
trailingComma: "all",
tabWidth: 2,
useTabs: false,
},
],
'@typescript-eslint/explicit-module-boundary-types': 'off',
},
plugins: ['vue', '@typescript-eslint'],
parserOptions: {
ecmaVersion: 2021,
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
ignorePatterns: ['xxx.js'],
};
DrawPane.vue: Parsing error: ‘>’ expected. [Ln 2, Col 11]
<template>
<div class="drawingPanel"
:style="{ width: scrollData.drawingPane.scaledWidth + 'px', height: scrollData.drawingPane.scaledHeight + 'px' }">
<div class="drawing" ref="drawing" :class="{ wireframe: svg.wireframeMode }"></div>
<div class="interface" ref="interface">
<svg width="100%" height="100%" :viewBox="svg.viewBox" class="svg_interface">
Package.json:
"devDependencies": {
"@rushstack/eslint-patch": "^1.2.0",
"@tsconfig/node18": "^2.0.0",
"@types/jest": "^29.5.12",
"@types/jsdom": "^21.1.1",
"@types/node": "^20.14.11",
"@types/regression": "^2.0.6",
"@vitejs/plugin-vue": "^4.6.2",
"@vue/compiler-sfc": "^3.4.31",
"@vue/eslint-config-prettier": "^7.1.0",
"@vue/eslint-config-typescript": "^13.0.0",
"@vue/test-utils": "^2.3.2",
"@vue/tsconfig": "^0.3.2",
"cypress": "^13.10.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-cypress": "^3.2.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-vue": "^9.27.0",
"jsdom": "^22.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^3.3.3",
"prettier-eslint": "^16.3.0",
"sass": "^1.32.11",
"start-server-and-test": "^2.0.0",
"typescript": "^5.5.3",
"vite": "^5.2.11",
"vite-plugin-dts": "^2.3.0",
"vitest": "^0.31.0",
"vue-tsc": "^2.0.29"
}
ESLint Output:
[Error - 10:26:11 PM] TypeError: prettier.resolveConfig.sync is not a function
Occurred while linting C:sourceiconBuilderfrontEndsrcservicesSvgCommon.ts:1
Rule: "prettier/prettier"
at Program (C:sourceiconBuilderfrontEndnode_modules@vueeslint-config-prettiernode_moduleseslint-plugin-prettiereslint-plugin-prettier.js:138:40)
at ruleErrorHandler (C:sourceiconBuilderfrontEndnode_moduleseslintliblinterlinter.js:1076:28)
at C:sourceiconBuilderfrontEndnode_moduleseslintliblintersafe-emitter.js:45:58
at Array.forEach (<anonymous>)
at Object.emit (C:sourceiconBuilderfrontEndnode_moduleseslintliblintersafe-emitter.js:45:38)
at NodeEventGenerator.applySelector (C:sourceiconBuilderfrontEndnode_moduleseslintliblinternode-event-generator.js:297:26)
at NodeEventGenerator.applySelectors (C:sourceiconBuilderfrontEndnode_moduleseslintliblinternode-event-generator.js:326:22)
at NodeEventGenerator.enterNode (C:sourceiconBuilderfrontEndnode_moduleseslintliblinternode-event-generator.js:340:14)
at CodePathAnalyzer.enterNode (C:sourceiconBuilderfrontEndnode_moduleseslintliblintercode-path-analysiscode-path-analyzer.js:803:23)
at C:sourceiconBuilderfrontEndnode_moduleseslintliblinterlinter.js:1111:32