I'm learning Nuxt. I've set up a project, with ESLint included. Here's my index.vue:
<template>
<h1 class=reddo>Hello, world</h1>
</template>
<script>
export default {
head() {
// Set Meta Tags for this Page
}
// ...
}
</script>
<style>
.reddo {
color: red;
}
</style>
When I run this I get this:
(It doesn't say this is from ESLint, but I assume it is). The first error complains about the indentation before the <h1>. Do I need to do something to make it understand .vue files so it validates only the <script> part or something?
Thank you in advance.
Since you followed the Nuxt intro video, you likely have a .eslintrc.js file in your project folder that extends a config from #nuxt/eslint-config that adds this parser and some default rules (source code).
The default configuration is linting the entire .vue file, as the Vue parser understands them. There are some limitations to the parser as well which may be triggering your linter if there were any changes not from the Nuxt config.
You can change or disable this configuration by editing your .eslintrc.js file; however, there are many advantages to statically analyzing your code using a linter. So consider finding or making a config that has few stylistic rules (or ones that you like) so you can still catch possible errors, including ones specific to Vue.
If you want to revert to a working .eslintrc.js file, try copying the changes from a new create-nuxt-app.
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'#nuxtjs',
'plugin:nuxt/recommended'
],
plugins: [
],
// add your custom rules here
rules: {}
}
Related
By default, NextJS will inject <style> tags inline inside head in development (possibly using style-loader under the hood).
In production mode, NextJS will extract css chunks and serve them as separate css files from _next/static directory.
I debugged webpack config NextJS serves by default and noticed it uses mini-css-extract-plugin under the hood to achieve this behavior.
The problem is, for my needs I need NextJS to inject inline styles in production as well. What is the easiest way to achieve this?
Here is the current next.config.js that I use
const nextConfig = {
useFileSystemPublicRoutes: false,
poweredByHeader: false,
assetPrefix: '',
webpack(config) {
console.dir(config.module.rules, { depth: null, colors: true });
config.module.rules.push({
test: /\.svg$/,
use: ['#svgr/webpack'],
});
return config;
},
};
module.exports = nextConfig;
You can use next/head to append <head>.
https://nextjs.org/docs/api-reference/next/head
By the way; inline-styles may be understood as <div style=".." /> I think you are asking style tags inside head; to avoid confusion; you can edit your post to clarify that little bit.
I'm trying to make openlayers work in Nuxt but whenever I tried to import openlayers components, I had several errors that I solved, but one of them is "Blob is not defined - node_modules/ol/worker/webgl.js"
I found nothing on openlayers and nuxt and i'm having hard times to just make it work :/
Here is the steps of what I did :
npm install ol
made a file with import View from 'ol/View', got error "can't import ESM module...."
created a plugins folder with a ol.js with all OL assests imported, and added plugins: ['#/plugins/ol'] in nuxt.config
preview of my ol.js file in my plugins folder
Got error "can't read fs" file
added extend: (config, { isDev, isClient }) => { config.node = {fs: 'empty',} into my nuxt.config file in build
Also added standalone: true,
and NOW I have blob is undefined and really, I have no clue on what to do to make openlayers work :/
Any help is welcome !
EDIT : Made some changes
1 I installed vuelayers
2 followed the guide on https://vuelayers.github.io/#/docs/quickstart?id=nuxtjs
edited nuxt.config
plugins: [{
src: '#/plugins/vuelayers.js',
ssr: false
}, { ... }],
modules: [
...,
'~/shared/vueLayers',
],
Create a file shared/ directory named vuelayers.js
export default function (moduleOptions) {
this.options.css.push('vuelayers/lib/style.css')
}
3 pasted the content of the "simple map example"
I have no error but nothing is displayed on my component yet
The "can't import ESM module...." occurs because the ol package exports an ES6 module and when Nuxt is rendered on the server side the parent project uses CommonJS modules. As a result a run time error occurs when the open layers code is not transpiled for server side rendering.
I found there to be two solutions to this problem.
Explicitly transpile the Open Layers modules that are used in the transpile property of the build property in nuxt.config.js
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: [
'ol/control',
'ol/proj',
'ol/style/Circle',
'ol/style/Fill',
'ol/format/GeoJSON',
'ol/format/MVT',
'ol/Map',
// ...
],
},
Create a Nuxt plug-in to wrap Open Layers that's only used on the client side similar to the example seen in this gist.
I found the second solution to be cleaner and since Open Layers uses <canvas> render the map it can't easily be rendered on the server side anyway.
Note that the Gist linked above is a bit dated, but the idea is still relevant. A modern example might look like the following:
// plugins/open-layers.js
import Map from 'ol/Map';
import View from 'ol/View';
export default (context, inject) => {
const ol = {
Map,
View,
};
inject('ol', ol);
};
// nuxt.config.js
export default {
// ...
plugins: [
{ src: '~/plugins/open-layers.js', mode: 'client' },
],
};
// Parent component
<template>
<client-only>
<Map />
</client-only>
</template>
// Map.vue
<template>
<div ref="map" />
</template>
<script>
export default {
name: 'Map',
methods: {
renderChart() {
this.map = new $ol.Map({
target: this.$refs.map,
view: new $ol.View({}),
});
},
},
};
</script>
I am using rollup to build my TypeScript sources. I want to remove comments ONLY, without any minification, in order to hot update code when debugging.
I have tried rollup-plugin-terser, it can remove comments but it will also minify my code somehow, I cannot completely disable the minification.
How can I do that? Thanks!
Like #jujubes answered in the comments, the rollup-plugin-cleanup will do the task. I want to expand a bit.
Three things:
Add ts to extensions list, like extensions: ["js", "ts"] — otherwise sources won't be processed, even if transpiling step typescript() is before it — I originally came here investigating why rollup-plugin-cleanup won't work on TS files and it was just ts extension missing 🤦♂️
code coverage is important; on default settings, this plugin would remove istanbul statements like /* istanbul ignore else */ so it's good to exclude them, comments: "istanbul",
removing console.log is a separate challenge which is done with #rollup/plugin-strip and it goes in tandem to rollup-plugin-cleanup. In my case, depending is it a "dev" or "prod" Rollup build (controlled by a CLI flag --dev, as in rollup -c --dev), I remove console.log on prod builds only. But comments are removed on both dev and prod builds.
currently, I use:
import cleanup from "rollup-plugin-cleanup";
...
{
input: "src/main.ts",
output: ...,
external: ...,
plugins: [
...
cleanup({ comments: "istanbul", extensions: ["js", "ts"] }),
...
Here's an example of rollup-plugin-cleanup being used my Rollup config, here's my Rollup config generator (in monorepos, Rollup configs are hard to maintain by hand so I generate them). If you decide to wire up --dev CLI flag, the gotcha is you have to remove the flag from the commandLineArgs before script ends, otherwise Rollup will throw, see the original tip and it in action.
You should be able to achieve this too with just rollup-plugin-terser. It bases on terser so more information it's actually available on its README, here is the part related to minification. So in your case this part of rollup.config.js should looks like:
plugins: [
terser({
// remove all comments
format: {
comments: false
},
// prevent any compression
compress: false
}),
],
Keep in mind, that you can also enable part of configuration for production only. So having declared production const in your rollup.config.js you can do like that:
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
export default {
plugins: [
production && terser({
// terser plugin config here
}),
],
};
In my Chai tests I often find myself wanting to use their assertions that are something like .to.be.empty, .to.be.true e.t.c., because I find them to be cleaner to read than .to.be.length(1) or .to.be.equal(true). However, this breaks my linter (I'm using default Airbnb linting).
I could use the // disable-eslint-line syntax, but then I'd have to add it to every single line that reads like that and that seems tedious.
I've also read about the DirtyChai library, but that would require me to go back through my entire testing library adding brackets to them all which seems like something I shouldn't have to do simply to get my linter to pass something it should probably be OK with in the first place.
Does anyone know a nicer way to handle this than the ways I've outlined above?
You can disable the rule for the entire file using eslint-disable at the top of the file in question:
/* eslint-disable no-unused-expressions */
expect(someTrueValue).to.be.true;
However, adding this at the top of every test file can be tedious. To disable this rule for all relevant files, you can:
Put a new .eslintc configuration file in the same directory as your test files, configured to disable that rule. This allows you to use the default configuration for all other rules while ignoring that rule specifically only on files in that folder. ESLint calls this Configuration Cascading.
{
"rules": {
"no-unused-expressions": "off"
}
}
Use the overrides key in your main .eslintrc file to disable rules for groups of files with glob pattern matching:
{
"overrides": [
{
"files": ["*.test.js", "*.spec.js"],
"rules": {
"no-unused-expressions": "off"
}
}
]
}
This also allows you to disable other rules which become troublesome in testing, such as no-underscore-dangle when using rewire.
Just found another option using Relative Glob Patterns:
In your .eslintrc file:
"overrides": [
{
"files": "*.test.js",
"rules": {
"no-unused-expressions": "off"
}
}
]
I've made a small plugin called eslint-plugin-chai-friendly that overrides the default no-unused-expressions rule and makes it friendly towards chai. The modified rule ignores the expect and should statements while keeping default behavior for everything else.
Combining jonalvarezz's answer with Ihor Diachenko's answer gave me exactly what I wanted:
npm install --save-dev eslint-plugin-chai-friendly
// .eslintrc.js
module.exports = {
// ...
plugins: ['chai-friendly'],
overrides: [{
files: '*.test.js',
rules: {
'no-unused-expressions': 'off',
'chai-friendly/no-unused-expressions': 'error',
},
}],
// ...
}
This way, the no-unused-expression rule will only be overridden in *.test.js files
AND
a no-unused-expression rule will still be in place to catch any unused expressions in the test files that are unrelated to chai.
In case anyone is stumbling upon this today, I had the same issue and found this solution on eslint documentation. In your eslint configuration file, you can specify one or several environments, which will predefine global variables for this environment. For us, it'd be mocha, and you'd configure like this in your .eslintrc.json:
{
"env": {
"mocha": true
},
...
...
...
}
As a result, it will remove all false positive about mocha describe, it, beforeEach, etc. without needing to completely disable eslint or completely disable any specific rule.
Tested with ESLint v.4.11 and mocha 5.0
I had this issue with tslint and solved it by simply moving the rule for unused expressions down one level. My ./tslint.json has all the other rules I care about, then I made ./src/tslint.json that just looks like
{
"rules": {
"no-unused-expression": true
},
"extends": "../tslint.json"
}
tslint automatically checks for a config file in every level as it descends the tree (with --project or using the VSCode extension) so this means that my tests (under ./test/) have all the other rules applied, but no-unused-expression only applies to files under ./src/.
I want to use the same style in .js files and .ts files. I know there is jsRules property in tslint.json, but I see 2 problems with it:
Copying ant pasting exactly the same rules
When extending some configurations, e.g. tslint-react, you don't get the rules in jsRules, meaning that you have to go to the source code of the ruleset and copy it manually.
Any other way to have the same code style without having to maintain both eslint and tslint?
Not everyone knows that, but TSLint configuration doesn't have to come in a .json file. You can use the .js extension, and keep whatever logic you like inside.
In this case, we can split TSLint rules into two categories — universal rules and React-specific ones. Both rulesets will be used for TypeScript files, but only the first ones will be applied to JavaScript.
tslint.js
const UNIVERSAL_RULES = {
"max-line-length": [true, 120]
}
const REACT_RULES = {
"jsx-space-before-trailing-slash": true
}
module.exports = {
extends: [
"tslint:recommended"
],
jsRules: UNIVERSAL_RULES,
rules: {
...UNIVERSAL_RULES,
...REACT_RULES
}
}
When running TSLint CLI, it may be required to point to your configuration file explicitly. You can do that by adding --config tslint.js to your tslint command.