ESLint + Prettier formatOnSave does work but not Alt + Shift + F - eslint

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 ?

Related

How to resolve conflicts between prettier and eslint

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

Babel config to SWC

Now I have such babel config on the project and I really want to rewrite this case under swc. Would anyone be able to help with this
module.exports = {
sourceMaps: true,
presets: [
[
'#babel/preset-env',
{
exclude: ['transform-async-to-generator', 'transform-regenerator'],
},
],
'#babel/preset-react',
[
'#babel/preset-typescript',
{
isTSX: true,
allExtensions: true,
},
],
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
['#babel/plugin-proposal-decorators', { legacy: true }],
['#babel/plugin-proposal-class-properties', { loose: true }],
['module:fast-async', { spec: true }],
[
'#babel/plugin-transform-regenerator',
{
asyncGenerators: true,
generators: true,
async: false,
},
],
],
};
Now I have written such a config, but part of the application has stopped working with similar errors: [MobX] Cannot decorate undefined property: 'description'
test: /\.(tsx|ts|jsx|js)$/,
loader: 'swc-loader',
options: {
jsc: {
keepClassNames: true,
parser: {
syntax: 'typescript',
decorators: true,
tsx: true,
dynamicImport: true,
preserveAllComments: false
},
transform: {
legacyDecorator: true,
decoratorMetadata: true
},
loose: false
},
},

How to include node_modules in a bundle file using webpack?

please help me.
I'm to creating utilize webpack to bundle a simple project. but this problem is that the output
file contains module.exports = require(...).
I want to have everything in one bundle file without module.exports.
main.ts
import moment from "moment";
console.log(moment().year());
main.js <- writed bandle file
/***/ ((module) => {
module.exports = require("moment"); // <- I don't want
/***/ })
webpack.config.ts
module.exports = {
entry: {
main: ["/workspace/apps/background/src/main.ts"],
},
devtool: "source-map",
mode: "development",
output: {
path: "/workspace/dist/background",
filename: "main.js",
hashFunction: "xxhash64",
pathinfo: false,
libraryTarget: "umd",
globalObject: "this",
},
module: {
unsafeCache: true,
rules: [
{
test: {},
loader: "/workspace/node_modules/ts-loader/index.js",
exclude: {},
options: {
configFile: "/workspace/apps/background/tsconfig.app.json",
transpileOnly: true,
experimentalWatchApi: true,
},
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".mjs", ".js", ".jsx"],
alias: {},
plugins: [
{
source: "described-resolve",
target: "resolve",
extensions: [".ts", ".tsx", ".mjs", ".js", ".jsx"],
log: {},
baseUrl: "../..",
absoluteBaseUrl: "/workspace",
},
],
mainFields: ["es2015", "module", "main"],
},
performance: {
hints: false,
},
plugins: [
{
options: {
async: false,
typescript: {
enabled: true,
configFile: "/workspace/apps/background/tsconfig.app.json",
memoryLimit: 2048,
},
},
},
{
patterns: [
{
context: "/workspace/apps/background/src/assets",
to: "assets",
from: "**/*",
globOptions: {
ignore: [".gitkeep", "**/.DS_Store", "**/Thumbs.db"],
dot: true,
},
},
],
options: {},
},
],
watch: false,
watchOptions: {
aggregateTimeout: 200,
},
stats: {
hash: true,
timings: false,
cached: false,
cachedAssets: false,
modules: false,
warnings: true,
errors: true,
colors: true,
chunks: true,
assets: false,
chunkOrigins: false,
chunkModules: false,
children: false,
reasons: false,
version: false,
errorDetails: false,
moduleTrace: false,
usedExports: false,
},
experiments: {
cacheUnaffected: true,
},
target: "node",
node: false,
externals: [null],
};
Is there any solution?

ESLint no-unused-expressions on json file

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?

How to disable removeViewBox plugin in Next.Js and svgr?

I would like to disable the removeViewBox plugin in Next.js/svgr/svgo. The following next.config.js should work but it does not.
Anybody can help ?
I'm using it with:
"#svgr/webpack": "^6.2.0", "react": "17.0.2", "next": "^12.0.7",
module.exports = {
reactStrictMode: true,
i18n,
webpack(config) {
config.module.rules.push(
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: [
{
loader: '#svgr/webpack',
options: {
prettier: false,
svgo: true,
icon: true,
svgoConfig: {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
},
},
},
],
},
titleProp: true,
},
},
],
})
return config
},
}
For #svgr/webpack#5.5.0 it worked when I added { removeViewBox: false } right to plugins array:
{
loader: '#svgr/webpack',
options: {
svgoConfig: {
plugins: [
{ removeViewBox: false },
],
},
},
},
This is what's worked for my with next#13.0.5 and #svgr/webpack#6.5.1
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: [{ loader: '#svgr/webpack', options: { icon: true } }]
});

Resources