Why TSLint problems are not shown in IntelliJ Idea? - intellij-idea

I'm using IntelliJ Idea (Ultimate) and I'm trying to setup TSLint. What I have done so far:
created a new project
installed TS & TSLint npm i tslint typescript -D
enabled TSLint in Languages and Frameworks | TypeScript | TSLint | Enable (like suggested here)
added additional (rather random) tslint.json (see below)
applied it via right click | Apply TSLint Code Style Rules
created some ugly .ts file (see below)
but still none of the problems are highlighted. When I run tslint ugly.ts in console it shows many problems. TS problems are highlighted:
I've also checked highlighting settings:
And here's how TSLint settings look now (Enable checked, Automatic search is set):
Any ideas what could be wrong?
ugly.ts:
/* tslint:enable */
// npm i tslint typescript -D
function a (): void {
var b = 1;
if(b){var c=2; var d=5;}
var a =4
a+b
var s1 = 'haha'
, s2 ="ololo"
,s3 = `wow`
return ;;
}
function b(){return 9}
tslint.json:
{
"extends": ["tslint:recommended"],
"linterOptions": {
"exclude": [
"node_modules/**/*"
]
},
"rules": {
"quotemark": {
"single": true,
"severity": "error"
}, //"jsx-double"
"interface-name": false,
"whitespace": [ true, "check-module" ],
"max-classes-per-file": [ false ],
"member-access": false,
"object-literal-sort-keys": false,
"member-ordering": false,
"semicolon": [ true, "always", "ignore-bound-class-methods" ],
"variable-name": [ true, "check-format", "allow-leading-underscore", "allow-pascal-case" ],
"no-console": false,
"indent": [ true, "spaces", 2 ],
"no-empty-interface": false
}
}

Related

Using renovate to update TYPO3 installations minor/patches only

I have been experimenting with Renovate and would like to use it to auto update TYPO3 to the latest version. v10.4.x - where Renovate should only create MR's whenever the is an update available for the 'X' part.
I am using the following configuration:
config.js
module.exports = {
endpoint: 'https://gitlab.companyname/api/v4/',
token: '**gitlab_token**',
platform: 'gitlab',
baseBranches: ["master"],
assignees: ["Me"],
enabledManagers: "composer",
onboardingConfig: {
extends: ['config:base'],
},
repositories: [
{
repository: 'CMS/sitetemplate',
},
],
};
renovate.json in the project CMS/sitetemplate
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"config:base",
":disableDependencyDashboard",
":separatePatchReleases"
],
"prHourlyLimit": 0,
"prConcurrentLimit": 0,
"baseBranches": [
"master"
],
"enabledManagers": [
"composer"
],
"commitMessagePrefix": "[TASK] ",
"commitMessageTopic": "{{depName}}",
"commitMessageExtra": " ({{{displayFrom}}} => {{{displayTo}}})",
"rangeStrategy": "update-lockfile",
"packageRules": [
{
"matchUpdateTypes": [
"patch"
],
"matchPackagePrefixes": [
"typo3/cms-"
],
"excludePackageNames": [
"typo3/cms-cli",
"typo3/cms-composer-installers"
],
"groupName": "TYPO3 CMS",
"labels": [
"typo3"
]
},
{
"matchUpdateTypes": [
"minor",
"pin",
"digest",
"major"
],
"enabled": false
}
]
}
.gitlab-ci.yaml
Update Web Project:
rules:
- if: $RENOVATE_APPLICATION_TOKEN
when: never
- if: $RENOVATE_WEB_TOKEN
when: manual
variables:
RENOVATE_TOKEN: $RENOVATE_WEB_TOKEN
script:
- renovate $RENOVATE_EXTRA_FLAGS
when: manual
I have played around with the config a bit and it will create MR's, issues etc when i have other settings. So its working. However with the current configuration it does not create a PR.
The sitetemplate currently has TYPO3 V10.4.25 (in lock file) and i want it to create a PR so it will update all typo3/cms-* packages to the lastest TYPO3 V10.4.32
It should only update the lock file.
Currently when i run the CI i get no MR's and the following output
The CI output
PASTEBIN since it was to large
Anyone has any expirience with this, what configuration am i doing wrong?
https://github.com/renovatebot/renovate/discussions/17939
Confirmed working:
At a quick glance I think you're missing a setting of separateMinorPatch=true. You could turn that on globally (if you want to separate patch updates from minor for all packages) or specifically for certain packages by using packageRules.

How do I include 'fs' modules in Sapper?

I am working on a Sapper project, as it seemed neat for a little project I wanted to get up and running quickly. That's not be easy and I'm now having trouble running scripts from my Sapper project that include the built-in 'fs' modules.
I'm trying to build a character generator. I have built a script that will do this but I'd like to be able to save my generated characters as JSON files then read them in later. Reading in is easy, writing doesn't seem to be listed anywhere obvious. The best I have is trying to get the built in plugins to function to allow me access to fs modules but my research on this is spotty and not helping. Trying to get rollup to help doesn't appear to work and I am unable to find an acceptable alternative.
Whenever I run the project, it just says that it can't resolve it.
Could not load fs (imported by E:\Software Projects\Javascript\Io-Generator\src\routes\generator\generator.js): ENOENT: no such file or directory, open 'E:\Software Projects\Javascript\Io-Generator\fs'
Nothing I do seems to help. Please can someone explain what I'm missing here? Am I using Sapper wrong? Am I missing something in rollup here? Is there an alternative I'm missing?
My roll-up config if it helps:
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
dev,
hydratable: true,
emitCss: true
}),
resolve({
browser: true,
preferBuiltins: true,
dedupe
}),
commonjs( {
browser: true
} ),
globals(),
builtins( {
fs: true
} ),
json(),
legacy && babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/#babel/**'],
presets: [
['#babel/preset-env', {
targets: '> 0.25%, not dead'
}]
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
['#babel/plugin-transform-runtime', {
useESModules: true
}]
]
}),
!dev && terser({
module: true
})
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
svelte({
generate: 'ssr',
dev
}),
resolve({
browser: false,
preferBuiltins: true,
dedupe
}),
commonjs(),
builtins( {
fs: true
} ),
json()
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve( {
browser: false,
preferBuiltins: true
} ),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode)
}),
commonjs(),
builtins( {
fs: true
} ),
json(),
!dev && terser()
],
onwarn,
}
};```
So, I went an restarted my project from a fresh project. Aaaaand it was fine. It's working fine. It's possible that I really screwed up my project trying out multiple different things to get them working, causing some serious damage. I'll need to be more careful in future.

Vue and lint on run: how to configure?

When executing npm run serve. I got a LOT of warnings from a linter that I am not able to find and configure
Module Warning (from ./node_modules/eslint-loader/index.js):
warning: Insert `;` (prettier/prettier) at src\main.js:1:22:
> 1 | import Vue from "vue"
For example, My VsCode is setup to use 4 space as tab, in the Prettier extension, but when running the same loader warn me because it wants I use 2 spaces indentation.
I am not able to identify WHERE / HOW configure the eslint-loader itself to config/disable the rules as my need.
warning: Replace `····` with `··` (prettier/prettier) at src\main.js:22:1:
20 | new Vue({
21 | router,
> 22 | store,
| ^
23 | render: h => h(App)
24 | }).$mount("#app")
I want to disable this for example, I want to force 4 space indentation check, not 2 spaces!
I've the Vetur extension, and it's setup to use prettier
Prettier is setup to use 4 spaces tab. So I thinks that settings I need now are not vscode-related.
FINAL SOLUTION- Credits: https://eslint.vuejs.org/user-guide/#editor-integrations, and a lot of time trying and tring and trying by myself
I disabled prettier extension and disable auto formatting on vs code.
I added this snippet to workspace config (not globally !!!!)
{
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
},
{
"language": "javascriptreact",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.formatOnSave": false,
"vetur.validation.template": false
}
Plus, configure prettier/prettier on .eslintrc.js file.
For example, see how I am using prettier/prettier is the rules section:
module.exports = {
root: true,
env: {
node: true
},
extends: [
"plugin:vue/recommended",
"eslint:recommended",
"prettier/vue",
"plugin:prettier/recommended",
],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"prettier/prettier":[
"error",
{
"tabWidth" : 4,
"semi" : false,
}
]
},
parserOptions: {
parser: "babel-eslint"
}
}
I have prettier and eslint extensions installed on VsCode as said in my question post.
See available options here: https://prettier.io/docs/en/options.html
In this way, the configuration is working both on vscode AND is working as lint-on-run as I wanted.
Great !

How to workaround the "Unexpected Token Operator (>)" error when packaging a React app?

I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.

Karma, Browserify on React is failing on LESS

I'm learning how to use React, and in turn use Karma as the test runner. I'm running Karma with browserify / reactify (mocha+kai). Whenever I run npm test, I get the following error:
ERROR [framework.browserify]: bundle error
ERROR [framework.browserify]:
/Users/user/Projects/example-d3-react/src/d3Chart.less:1
.d3 {
^
ParseError: Unexpected token
ERROR [karma]: [TypeError: Not a string or buffer]
This happens on all LESS files in the project. I have tried adding a LESS preprocessor to the karma.conf like so:
preprocessors: {
'src/*.less': ['less'],
'tests/**/*.js': ['browserify']
},
browserify: {
debug: true,
transform: [ 'reactify' ]
},
lessPreprocessor: {
options: {
paths: ['src'],
save: true,
rootpath: './'
},
additionalData: {
modifyVars: {
'bodyColor': 'grey',
'secondBoxColor': 'blue'
},
globalVars: {
'globalBoxColor': 'red'
}
},
transformPath: function(path) {
console.log("transforming");
return path.replace(/\.less$/, '.compiled.css');
}
},
Add the preprocessor explicitly to the config: plugins: ['karma-less-preprocessor']
None of the suggested answers helped me, but in case anyone is experiencing this problem, the solution that worked for me is just adding the project-specific less transform to the package.json file. E.g:
{
...
"browserify": {
"exclude": "*.spec.js",
"transform": [
"node-lessify",
"browserify-ng-html2js"
]
},
...
}
Build broke when doing this, since I was using the cmd line transform when building application through NPM. Removed the cmd line transform part since the package.json transform will apply the transform programmatically, and now it works again.