Hide typescript files in ido-find-file when javascript files are present in folder Emacs - emacs

Whenever I use ido-find-buffer in Emacs I most of the time get the processed javascript files as first option, while I'd much rather get typescript files first.
Then again, I do not want to always hide javascript files, I guess only when using typescript as well.
Perhaps the best is to have typescript put the javascript files in another folder itself.
Is there a good solution for this?

You can have Typescript store the compiled files in another folder using the compiler option
"outDir": "dist"
Or whatever folder you want them to output into

I just noticed it is possible to define it in package.json:
{
"name": "app",
"version": "0.1",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w --outDir build", // <--- here
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
...
It gets written to a build directory and thus is not causing issues anymore.

Related

NWJS - "No files matching" error when trying to package app

I'm trying to package an NWJS app following various tutorials on YouTube and the web. But I'm getting "No files matching" error and it exits. Assuming it was because the dist/ and src/ directories hadn't been created, I created them myself, but I still get the error. All other paths listed in package.json exist.
After searching the web for a similar issue, the only thing I found was this:
https://github.com/nwutils/nw-builder/issues/190
However, this is regarding doing the build using command line args, rather than from package.json.
npm and nodejs were updated to latest version and nwjs was updated to 0.64.0-sdk.
I am attempting the build on MacOS 10.13.6, nodejs version 16.15.0, npm version 8.5.5 .
Any ideas anyone?
Thanks!
Kevin
CLI:
15:40:55 : ~/ReolinkNWJS
npm run prod
> ReolinkNWJS#0.0.1 prod
> nwbuild --platforms osx64 --buildDir dist/ src/
No files matching
15:41:00 : ~/ReolinkNWJS
ls
dist icons javascript package-lock.json package.json.TEMPLATE src
html images node_modules package.json resources styles
package.json:
{
"name": "ReolinkNWJS",
"description": "Reolink Client App In NWJS Framework",
"version": "0.0.1",
"icon": "icons/app.icns",
"main": "html/main.html",
"chromium-args": "--enable-logging=stderr --enable-spell-checking",
"window": {
"toolbar": false,
"width": 800,
"height": 500,
"position": "center"
},
"nodejs": true,
"node-remote": "*://*",
"scripts": {
"prod": "nwbuild --platforms osx64 --buildDir dist/ src/"
},
"devDependencies": {
"nw": "^0.64.0-sdk",
"nw-builder": "^3.7.0"
}
}
I think you either need to remove your src/ or move it to the front
"prod": "nwbuild --platforms osx64 --buildDir dist/"
"prod": "nwbuild src/ --platforms osx64 --buildDir dist/"
Also, either remove or change your node-remote. It is currently set up so that any webpage on the internet has complete control to run Node, meaning they can easily read the contents of all files on the computer, download virus.exe, delete all files, whatever, literally anything. Don't do that.
node-remote is almost exclusively used to point to http://localhost:8080, or some other port, for a local webserver your app runs on. Your main is pointing to a local file, not a webserver, so you likely do not need node-remote at all.
You probably want to move the "icon" at the root into the "window" sub object.
https://nwjs.readthedocs.io/en/latest/References/Manifest%20Format/#window-subfields

How to render Sass/scss with Visual Studio Code on remote?

I'm looking for a tool, an extension which compile/render scss and sass file to css on the server.
I know there is Live Sass Compiler. But it only compiles on the local. Sometimes I need to work on the remote/server. I'm using ftp-simple extension to work on the remote files. But I can't compile scss files.
Is there any solution for that?
Thanks
if you are using node-sass then you just add "compile:sass": "node-sass src/assets/sass/main.scss src/assets/css/style.css -w", in your package.json file,
Like this.
For automatic compile/render use -w, it means vs code watching your sass code whenever you writing it.
"scripts": {
"compile:sass": "node-sass src/assets/sass/main.scss src/assets/css/style.css -w",
"start": "react-scripts start",
},
or if you are doing in another way than you have check this link sass compile in vs code.

TS lint plugin for VS code doesn't track closed files

I'm using VSCode 1.17.2, and using tslint plugin with it to track lint errors. As of now it is working fine with opened files and showing errors on files with red marker and giving error in problems tab. But it is not tracking closed files. Am I missing any configuration? Currently I am using default configuration.
See the documentation for the extension:
The extension lints an individual file only. If you want to lint your
entire workspace or project and want to see the warnings in the
Problems panel, then you can:
use gulp that or define a script inside the package.json that runs
tslint across your project.
define a VS Code task with a problem matcher
that extracts VS Code warnings from the tslint output.
For example, here is an excerpt from a package.json file that defines
a script to run tslint:
{
"name": "tslint-script-demo",
"version": "1.0.0",
"scripts": {
"lint": "tslint tests/*.ts -t verbose"
},
"devDependencies": {
"typescript": "^2.2.2",
"tslint": "^5.0.0" }
}
Next, define a Task which runs the npm script with a problem matcher
that extracts the tslint errors into warnings.
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "lint",
"problemMatcher": {
"base": "$tslint5",
"fileLocation": "relative"
}
}
]
}
Finally, when you then run the tslint task you will see the warnings produced by the npm script in the Problems panel and you can
navigate to the errors from there.
Here is the complete setup example setup.

How do I use .babelrc to get babel-plugin-import working for antd?

I'm new to react, babel, and antd.
I installed react and started a project using create-react-app.
I installed antd (ant.design). It suggests using babel-plugin-import, so I installed that too.
If I interpret it right, the usage documentation for babel-plugin-import says to put this in a .babelrc file:
{
"plugins": [
["import", {
"libraryName": "antd",
"style": true
}]
]
}
I'm having trouble getting it to work. My web console still has the warning:
You are using a whole package of antd, please use
https://www.npmjs.com/package/babel-plugin-import to reduce app bundle
size.
I didn't have a .babelrc file in my project's directory, so I created one with the above contents and restarted my server (npm start). That didn't work, so I created one in myProject/node_modules/babel_plugin_import but that doesn't work either.
Where is that code snippet supposed to go?
At the bottom of https://github.com/ant-design/babel-plugin-import it says
babel-plugin-import will be not working if you add the library in
webpack config vender.
But I don't know what that means.
I asked another question here: How to get antd working with app created via create-react-app?
Maybe this problem has something to do with my project created via create-react-app??
[Update 2018-02-06: The answer is still correct, but there is a better alternative now, which is to use react-app-rewired. This is also documented in the link.]
You need to follow the instructions in https://ant.design/docs/react/use-with-create-react-app#Import-on-demand to a T.
You should not create ant .babelrc files or similar. When using CRA all babel config is handled inside the webpack config files.
First clean up the config files you created, and make sure you have babel-plugin-import installed.
Then eject your app: npm run eject
This will give you a config folder with 2 webpack config files for dev/prod environments.
Open those files and locate the place where you need to insert the plugins property as documented on the instructions page.
Just add what babel-plugin-import documentation says, but remember if you're using CRA, you cannot change babel configuration directly without ejecting the project.
If you don't want to eject, you can use #craco/craco, and put the babel configuration inside of it like this:
/* craco.config.js */
module.exports = {
babel: {
presets: [],
plugins: [
[
"import",
{
libraryName: "antd",
style: true, // or 'css'
},
],
],
loaderOptions: {
/* Any babel-loader configuration options: https://github.com/babel/babel-loader. */
},
},
};
Dont forget to change your scripts (more details in craco docs):
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build"
- "test": "react-scripts test",
+ "test": "craco test"
}

Show all warnings and errors in visual studio code

I'am using Visual Studio Code Version 1.6.0.
Is there any possibility to show errors and warnings of all files in the current root folder?
At the moment it shows only errors and warnings for open files.
UPDATE 2019
ES-Lint has introduced a new task in VS Code. You have to enable it in the workspace setings.
"eslint.lintTask.enable": true
Just go to terminal menu and select run task, then choose
eslint: lint whole folder
You can also auto-fix most problems by running the following command in the terminal:
.\node_modules\.bin\eslint.cmd --fix .
Reference: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
While we still await the problem scanner in VS Code, this is a good enough alternative if you use eslint.
OLD ANSWER
Here is how you can see all problems in less than 10 seconds.
You use a little trick.
Open replace all in files Ctrl + Shift + H.
Replace ; with ;
Hit replace all. That's it. Now, check Problems.
The assumption here is that all files have at least one semicolon. For
bigger projects, if you get a warning asking you to refine your
search, just enter something that is common in all files but is not
present a lot.
Very important: Make sure to check the Super cool! But i don't use eslint section! Wich provide a global solution! By setting up tasks! And explained in details!
Note: If you feel the document is blottered! Make sure to skim and get to the titles that catch you! Even though every section may matter! (TLDS (TOO LONG DO SKIM)).
Javascript and Eslint
To add upon #Ajay Raghav answer!
This section show how to run the task on question! And the output of the execution!
For javascript, Vscode Eslint extension provide such a feature! Which if you are using Eslint (and not jshint) then you are having it already installed!
Usage as described on #Ajay Raghav answer! Are explained on the Eslint extension page!
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
eslint.lintTask.enable: whether the extension contributes a lint task to lint a whole workspace folder.
eslint.lintTask.options: Command line options applied when running the task for linting the whole workspace (https://eslint.org/docs/user-guide/command-line-interface). An example to point to a custom .eslintrc.json file and a custom .eslintignore is:
{
"eslint.lintTask.options": "-c C:/mydirectory/.eslintrc.json --ignore-path C:/mydirectory/.eslintignore ."
}
Using the extension with VS Code's task running
From the doc:
The extension is linting an individual file only on typing. If you want to lint the whole workspace set eslint.lintTask.enable to true and the extension will also contribute the eslint: lint whole folder task. There is no need anymore to define a custom task in tasks.json.
If you are not familiar with task! Here how you use the above!
Go to Command pallet (CTRL + P + SHIFT)
> tasks run
Hit Tasks: run Task
You'll find eslint: lint whole folder
Hit and that's it
If eslint have no configuration setup! You'll get the following error!
If as such, Run eslint --init
And follow the interactive terminal!
Note if you don't have eslint command avaialble globally!
Intall it globally by running npm i -g eslint!
Result of the run
First the task run on the terminal!
You can see a detailed report! You can use the click link on terminal feature (CTRL + CLICK)! To directly open the file in question!
You can see too that the problems will automatically be listed in the problems tab! Which is cool!
Super cool! But i don't use eslint
Typescript and TSLINT
If you are a typescript user and you use TSLINT!
Then we need to go to the global way! And that's by creating a task!
Just like eslint did! (problemMatcher: $tsc) [you'll get to know what that is just a bit bellow].
(Make sure to check TSLINT is deprecated title)!
I use a complete other language (c#, java, c++, php, python ...)
Yup yup! We need a global way! And the global way is through creating a task!
Creating a task (The global way)
(Support all languages (to be configured for each))
We need to create a task!
The vscode documentation explains it pretty awesomely and in details!
https://code.visualstudio.com/docs/editor/tasks
Check the documentation!
Now in short! I would resume what a task is in:
A vscode tool and feature! That allow us to setup tasks based on tools and scripts and run them within vscode! Analyse there output within vscode! And activating and profiting from other vscode features! That includes Click link navigation on terminal! And problems listing on problem tab! Auto fixing and suggestions! Integration with the debugging tool! ...etc! It depends on the task type!
A task get set through a setting file (task.json)! For a workspace or the whole user! (Some tasks types need to be set for only a workspace! They depends on the variables of a workspace)!
Also the task feature contains a lot of options and features! And is a big piece! For more just check the documentation!
Back to our problem!
We want linting of a whole project! And errors detection!
We need to have the errors listed on the problems tab! And preferably too with fixes suggestions!
All this gonna be done through a task.
Setting up the task! And core elements
Through vscode task features and integration! We need to configure it to allow good output! And integration with the problems tab!
The config will go as such:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "lint",
"problemMatcher": ["$eslint-stylish"]
}
]
}
(Here eslint through npm run lint)
The most important thing here to see! Is the type which determine the category and the task handling and launch setup! The script which define what get executed! And lastly and importantly problemMatcher!
For the whole tasks setting up! And options you can check the doc!
Here another example for typescript:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": ["$tsc"],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
TSLINT is deprecated
Yo ! You just shown how, a line above! Yea there is something important!
We can see typescript problems through tsc compile process! Or Through TSLINT! TSLINT will support code style rules and so on! BUT mmmm TSLINT is deprecated! And ESLINT is taking on! And in simple words use Eslint! And so we can use Eslint for Typescript! And that can be more rich!
Check the link bellow from the official link:
https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration
And humor face: Don't be affraid to do this
Already did!
Should i migrate Tslint to eslint
Another reason would be: TSLint is a linter that can only be used for TypeScript, while ESLint supports both JavaScript and TypeScript.
Reason for the choice and deprecation is:
In the TypeScript 2019 Roadmap, the TypeScript core team explains that ESLint has a more performant architecture than TSLint and that they will only be focusing on ESLint when providing editor linting integration for TypeScript.
Check it here and how to setup .eslintrc.js without the migration tool!
or https://www.npmjs.com/package/#typescript-eslint/eslint-plugin
Which in short would be like:
module.exports = {
"parser": "#typescript-eslint/parser", // set eslint parser
"parserOptions": {
"ecmaVersion": 12, // latest ecma script features
"sourceType": "module" // Allows for the use of imports
},
"plugins": [
"#typescript-eslint"
],
extends: [
"plugin:#typescript-eslint/recommended" // Uses the recommended rules from the #typescript-eslint/eslint-plugin
],
rules: {
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
// e.g. "#typescript-eslint/explicit-function-return-type": "off",
}
};
And sure : npm install --save-dev eslint #typescript-eslint/parser #typescript-eslint/eslint-plugin
Make sure to use eslint --ext .js,.ts when executing eslint! Since by default eslint will only search for .js files.
Make sure to use the code styles versions that support typescript like this one for airbnb:
https://www.npmjs.com/package/eslint-config-airbnb-typescript
(The next section is the most important)!
Processing task output with problem matchers
https://code.visualstudio.com/docs/editor/tasks#_processing-task-output-with-problem-matchers
VS Code can process the output from a task with a problem matcher. Problem matchers scan the task output text for known warning or error strings, and report these inline in the editor and in the Problems panel. VS Code ships with several problem matchers 'in-the-box':
TypeScript: $tsc assumes that file names in the output are relative to the opened folder.
TypeScript Watch: $tsc-watch matches problems reported from the tsc compiler when executed in watch mode.
JSHint: $jshint assumes that file names are reported as an absolute path.
JSHint Stylish: $jshint-stylish assumes that file names are reported as an absolute path.
ESLint Compact: $eslint-compact assumes that file names in the output are relative to the opened folder.
ESLint Stylish: $eslint-stylish assumes that file names in the output are relative to the opened folder.
Go: $go matches problems reported from the go compiler. Assumes that file names are relative to the opened folder.
CSharp and VB Compiler: $mscompile assumes that file names are reported as an absolute path.
Lessc compiler: $lessc assumes that file names are reported as absolute path.
Node Sass compiler: $node-sass assumes that file names are reported as an absolute path.
OK but you said JAVA, C/C++, PHP, Python ...
=> We need to write our own problemMatcher
C/C++ (GCC)
The c/c++ support in vscode is added through the official ms extension ms-vscode.cpptools
https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools
The extension provide $gcc problemMatcher!
A task will go as:
{
"version": "2.0.0",
"tasks": [
{
"type": "shell",
"label": "g++ build all",
"command": "/usr/bin/g++",
"args": ["${workspaceFolder}/src/*.cpp", "-o", "${workspaceFolder}/build"],
"options": {
"cwd": "/usr/bin"
},
"problemMatcher": ["$gcc"],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Note that i just made the compilation to go for files in src (one level)
One can use cmake to build!
May like to check :
https://code.visualstudio.com/docs/cpp/config-linux#_build-helloworldcpp
Defining a problem matcher
You can check the doc section bellow:
https://code.visualstudio.com/docs/editor/tasks#_defining-a-problem-matcher
An example for gcc was given for c/c++!
A compilation outcome will be like:
helloWorld.c:5:3: warning: implicit declaration of function ‘prinft’
We set a matcher by the following
{
// The problem is owned by the cpp language service.
"owner": "cpp",
// The file name for reported problems is relative to the opened folder.
"fileLocation": ["relative", "${workspaceFolder}"],
// The actual pattern to match problems in the output.
"pattern": {
// The regular expression. Example to match: helloWorld.c:5:3: warning: implicit declaration of function ‘printf’ [-Wimplicit-function-declaration]
"regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
// The first match group matches the file name which is relative.
"file": 1,
// The second match group matches the line on which the problem occurred.
"line": 2,
// The third match group matches the column at which the problem occurred.
"column": 3,
// The fourth match group matches the problem's severity. Can be ignored. Then all problems are captured as errors.
"severity": 4,
// The fifth match group matches the message.
"message": 5
}
}
Directly in the task config that can go as:
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"command": "g++",
"args": ["${workspaceFolder}/src/*.cpp", "-o", "${workspaceFolder}/build"],
"problemMatcher": {
"owner": "cpp",
"fileLocation": ["relative", "${workspaceFolder}"],
"pattern": {
"regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
"file": 1,
"line": 2,
"column": 3,
"severity": 4,
"message": 5
}
}
}
]
}
You can see how staight forward the setting is!
You can check the doc link above for more details!
Defining multiple line problem matcher
https://code.visualstudio.com/docs/editor/tasks#_defining-a-multiline-problem-matcher
Some tools spread problems found in a source file over several lines, especially if stylish reporters are used. An example is ESLint; in stylish mode it produces output like this:
test.js
1:0 error Missing "use strict" statement strict
✖ 1 problems (1 errors, 0 warnings)
I'll not go about the details check the doc! it explains it well (check the loop property too!
{
"owner": "javascript",
"fileLocation": ["relative", "${workspaceFolder}"],
"pattern": [
{
"regexp": "^([^\\s].*)$",
"file": 1
},
{
"regexp": "^\\s+(\\d+):(\\d+)\\s+(error|warning|info)\\s+(.*)\\s\\s+(.*)$",
"line": 1,
"column": 2,
"severity": 3,
"message": 4,
"code": 5,
"loop": true
}
]
}
Modifying an existing problem matcher
https://code.visualstudio.com/docs/editor/tasks#_modifying-an-existing-problem-matcher
Simply check the doc!
JAVA
oK now we know, how to make problems matchers! We didn't do java yet! So let's do that for it! (Wait i just googled and here someone that did it)
{
// compiles all files in the folder of the currently opened file
"taskName": "javac all",
"args": ["$env:CLASSPATH += ';${fileDirname}'; javac ${fileDirname}\\*.java -Xlint"],
"showOutput": "silent",
"problemMatcher": {
"owner": "java",
"fileLocation": "absolute",
"pattern": {
"regexp": "^(.*):([0-9]+): (error|warning): (.*)$",
"file": 1,
"line": 2,
"severity": 3,
"message": 4
}
}
}
PHP
Here a php task too that use code sniff!
src (googling again): https://github.com/bmewburn/vscode-intelephense/issues/1102
{
"version": "2.0.0",
"tasks": [
{
"label": "PHP: CodeSniff Workspace",
"type": "shell",
"command": "${config:phpcs.executablePath}",
"args": [
"--standard=${config:phpcs.standard}",
"--extensions=module,inc,install,php,theme,test,js,css",
"--report=csv",
"--basepath=${workspaceFolder}",
"web/modules/custom"
],
"options": {
"cwd": "${workspaceFolder}"
},
"problemMatcher": {
"owner": "php",
"fileLocation": [
"relative",
"${workspaceFolder}"
],
"pattern": {
"regexp": "^\"(.*?)\",(\\d+),(\\d+),(error|warning),\"(.*)\",.*$",
"file": 1,
"line": 2,
"column": 3,
"severity": 4,
"message": 5
}
}
}
]
}
Problem matcher and auto fixing
Ok so how the problem matcher make the auto fixing suggestions? The answer is it doesn't! It can be clear! Or you may said at the first time you get to see the problem matcher, hey it may have a relation!
It isn't! The languages support or linters extensions are what provide such a feature! And that through using vscode Action api!
Check
https://code.visualstudio.com/api/references/vscode-api#CodeAction
https://code.visualstudio.com/api/references/vscode-api#CodeActionKind
https://code.visualstudio.com/api/references/vscode-api#CodeActionProvider%3CT%3E
So simply: The problemMatcher set how the output of a task run is parsed and outputed on the problems tab!
And the languages support extension implement the auto fixes! Or linters! (Extensions) [I can make a play ground extension if i want]!
To note too that the yellow bulbe in the problems tab! Works and allow auto fixing! Because the problem matcher provide the line for the problem! That get mapped with the output of the extension fixing suggestions range! That get precised on the CodeActionProvider!
Is not possible right now, the VSCode team have a request for that feature that they are working in, so we must wait.
An alternative is to use a task runner to lint all errors in the project like the one created in this guide.
Visual code has an Extention for ESLINT to integrate the lint errors into the IDE. Whenever you save file, it will show its lint errors. See it: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
For any like me who have encountered this question dozens of times with variations on the google search "c# vs code show all errors in all files", my issue was that I had too many files associated with my project – the C# extension by default starts error checking only open files when you exceed 1000 files total.
Go to Settings => Workspace => Max Project File Count For Diagnostic Analysis, and increase the value to wherever you think is reasonable.
Equivalently, add the following line to your existing settings.json, which increases the file count cutoff to 10,000.
{
// Rest of settings.json file here
"csharp.maxProjectFileCountForDiagnosticAnalysis": 10000,
}
Just run:
npx eslint --init
And configure it as needed