How to autofix serverMiddleware files using eslint in NuxtJS? - javascript

i'am using #nuxtjs/eslint-module in NuxtJS. And i have no idea how to autoformat (on server side, not editor) serverMiddleware files using eslint and prettier. I have installed Nuxt by create-nuxt-app and added ExpressJS into ~/api folder (index.js and routes/test.js).
added to nuxt.config.js:
...
buildModules: [
'#nuxtjs/eslint-module',
],
...
...
eslint: {
fix: true
},
...
eslintrc.js contents:
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '#babel/eslint-parser',
requireConfigFile: false
},
extends: [
'#nuxtjs',
'eslint:recommended',
// 'plugin:node/recommended',
'plugin:nuxt/recommended',
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
rules: {
semi: [2, 'never'],
'no-console': 'off',
'vue/max-attributes-per-line': 'off',
'prettier/prettier': ['error', {
htmlWhitespaceSensitivity: 'ignore',
semi: false,
singleQuote: true
}]
}
}
It works well and my nuxt files autofixed on save correctly, such as in ./layouts, /pages etc.
But after adding middleware (Express):
...
serverMiddleware: {
'/api': '~/api'
},
...
ESLint and its plugins not watch ~/api files for errors and dont autofixig them.
I tryed to add ~/api folder to watch property under build options, but this do not have effect.
...
build: {
watch: ['api'],
},
...
How to properly lint and autofix serverMiddleware files on server side not by IDE?

Related

Setting all rules to warn in a ESLint derived config while keeping the base rules as-is

I have three config files:
eslint-future-plugins.js
eslint-current.js
eslintrc.js
I would like to use all of the plugins/rules in eslint-current.js as-is (some rules are set to error, some to warn), and I would like to set all the rules in all the plugins in eslint-future-plugins.js as "warn".
My eslintrc.js looks like this:
module.exports = {
root: true,
reportUnusedDisableDirectives: true,
ignorePatterns: ['.lintstagedrc.js'],
extends: [
'next',
'./eslint-current.js',
'./eslint-future-plugins.js',
],
parser: '#typescript-eslint/parser',
rules: {},
};
eslint-future-plugins.js:
module.exports = {
extends: ['plugin:#typescript-eslint/recommended'],
plugins: ['#typescript-eslint', 'only-warn'],
rules: {},
};
eslint-plugin-only-warn is a plugin for turning all errors into warnings. This is great for what I need but it is setting all the errors from the base eslint-current.js to warn as well - which I don't want.
How can I fix this?
You can use the "overrides" property in your eslintrc.js file to set specific rules in eslint-future-plugins.js to "warn" while keeping the rules in eslint-current.js as-is.
In your eslintrc.js file, you can add an "overrides" property that targets the specific rules or plugins in eslint-future-plugins.js and sets them to "warn". For example:
module.exports = {
root: true,
reportUnusedDisableDirectives: true,
ignorePatterns: ['.lintstagedrc.js'],
extends: [
'next',
'./eslint-current.js',
'./eslint-future-plugins.js',
],
parser: '#typescript-eslint/parser',
rules: {},
overrides: [
{
files: ['*.ts', '*.tsx'],
plugins: ['#typescript-eslint', 'only-warn'],
rules: {
// set specific rules here
'rule-name': 'warn'
}
}
]
};
This will only set the rules specified in the "rules" property to "warn" for files with a .ts or .tsx extension and only for the plugin named 'only-warn'.

What is the proper way of bundling in node dependencies with rollup?

So I was trying to bundle in a bunch of external package dependencies using roll-up, like three JS and deck.gl. Right now I have a rollup config file set up like so, one to build just the code I have written and another that bundles in all the dependencies :
import externals from "rollup-plugin-node-externals";
export default [
{
input: "./Src/index.js",
output: [
{
file: "./Build/pgl.js",
format: "iife",
plugins: [
externals({
deps: true, // Dependencies will not be bundled in
}),
],
},
{
file: "./Build/pgl_module.js",
format: "iife",
plugins: [
externals({
deps: false, // Dependencies will be bundled in
}),
],
sourceMap: true,
},
],
},
];
I have also tried to do the same thing with something like
import { nodeResolve } from '#rollup/plugin-node-resolve';
export default {
input: 'src/index.js',
output: {
dir: 'output',
format: 'cjs'
},
plugins: [nodeResolve()]
};
but to no avail it never bundles up the node packages into the build file and always gives the error :
...
three/examples/jsm/lines/Line2.js (guessing 'Line2_js')
three/examples/jsm/lines/LineMaterial.js (guessing 'LineMaterial_js')
three/examples/jsm/lines/LineGeometry.js (guessing 'LineGeometry_js')
three/examples/jsm/controls/OrbitControls (guessing 'OrbitControls')
#deck.gl/core (guessing 'core')
#deck.gl/layers (guessing 'layers')
(!) Unresolved dependencies

ESLint throwing unpredicted errors with Hardhat

I recently began a project which uses hardhat. I ran npx hardhat ., and went with the advanced TS project.
Everything works fine, from the types to the solidity compiling, but ESLint always complains...
This is the kind of error I keep seeing:
As you can see the types are there, but ESLint continues to throw errors. This luckily doesn't stop the app to run.
Here is my config file:
module.exports = {
env: {
browser: false,
es2021: true,
mocha: true,
node: true
},
plugins: ['#typescript-eslint'],
extends: ['standard', 'plugin:node/recommended'],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12
},
rules: {
'node/no-unsupported-features/es-syntax': [
'error',
{ ignores: ['modules'] }
]
}
}
I've spent a lot of time on this issue, and the best method for me was to remove everything.
1 - Create a .ptettierrc.json file the root of your project.
2 - Run yarn remove eslint-plugin-promise eslint-plugin-node eslint-plugin-import eslint-config-standard eslint-config-prettier
3 - Change your ESLint config to the one below:
module.exports = {
env: {
browser: false,
es2021: true,
mocha: true,
node: true
},
plugins: ['#typescript-eslint'],
extends: ['plugin:prettier/recommended'],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaVersion: 12
},
rules: {
'node/no-unsupported-features/es-syntax': [
'error',
{ ignores: ['modules'] }
]
}
}
Keep in mind this is for a fresh config, if you've already changed your config, just remove any mentions of the package we removed on step 2.

How to inline css in vite2

I use vite2 to build my app, and it's build a css file in my project. I want to get inline css in my project.(like postcss.config extract: false)
I tried:
{
css: { postcss: { extract: false } }
}
It didn't works.
I tried config postcss plugins directly:
build: {
rollupOptions: {
plugins: [
postcss({
use: {
less: { javascriptEnabled: true },
},
extensions: ['.less'],
extract: false,
}),
],
}
},
And it can't recognized less file. I got this error:
[postcss] Unrecognised input
file: /Users/tang/Desktop/mono-repo/packages/editor/src/index.less
error during build:
undefined

after phoenix 1.3 upgrade app.js are not loaded

I updated my phoenix 1.2 to 1.3 follwing the phoenix upgrade description.
Now assets/js/app.js can't be loaded:
Uncaught Error: Cannot find module 'js/app' from '/'
After debugging the problem, I found that the expected module is app not js/app.
When I change the module name in the brunch-config.js autoRequire modules to ["app"] instead of ["js/app"] it works. I don't understand what is the problem or what I did in my app, that the default settings don't work.
Here my assets/brunch-config.js
exports.config = {
// See http://brunch.io/#documentation for docs.
files: {
javascripts: {
joinTo: "js/app.js"
},
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["../priv/static/css/app.css"] // concat app.css last
}
},
templates: {
joinTo: "js/app.js"
}
},
conventions: {
assets: /^(static)/
},
// Phoenix paths configuration
paths: {
// Dependencies and current project directories to watch
watched: ["static", "css", "js", "vendor"],
// Where to compile files to
public: "../priv/static"
},
// Configure your plugins
plugins: {
babel: {
// Do not use ES6 compiler in vendor code
ignore: [/vendor/]
},
copycat: {
"fonts": ["node_modules/font-awesome/fonts"] // copy node_modules/font-awesome/fonts/* to priv/static/fonts/
},
sass: {
options: {
includePaths: [
"node_modules/bootstrap-sass/assets/stylesheets",
"node_modules/font-awesome/scss"
], // tell sass-brunch where to look for files to #import
precision: 8 // minimum precision required by bootstrap-sass
}
}
//sass: {
// mode: "native" // This is the important part!
// },
},
modules: {
autoRequire: {
"js/app.js": ["js/app"]
}
},
npm: {
enabled: true,
globals: {
$: 'jquery',
jQuery: 'jquery'
}
}
};
And my assets/js/app.js is here:
import "phoenix_html"
import "./datetimepicker"
thanks for any help, tipps or ideas to understand/solve the problem.
The problem is related to the brunch version.
updating brunch to:
brunch#2.10.10
solved the problem.

Categories

Resources