Website  •   Docs   •   Roadmap  •   Mission  •   Playground

Find and lint complex code patterns effortlessly

---

What is CodeQue?

CodeQue is semantic code search engine that understands the code syntax.

It matches code structurally which makes it excellent for more complex queries.

Query language offers wildcards, partial matching and ignores code formatting.

Structural code search is available for JavaScript, TypesScript, HTML, CSS, Python, Lua and more soon.

Text code search with handy wildcards is available for every language and covers common regex search use cases.

Give it a try in playground

Just paste code snippet to start searching, no installation needed!

Integrations

CodeQue is available as:

• VSCode extension for delightful code search and navigation experience.
• ESLint integration for creating custom linting rules in zero time.
• CLI tool for searching code and more including headless environments.

All CodeQue tools work offline hence code never leaves your local environment.

Coming soon

CodeQue will be soon available as:

• Duplicated code identification
• Batch code refactoring
• Advanced ESLint rule creator

🔔 Get notified about updates 🔔

Visual Studio Code Extension 🔮

VScode extension aims to make your workflow more efficient.

It addresses the problems of standard search by providing multiline support and offers an easy way to add gaps or use wildcards in the query.

You don't need to have any Regex knowledge to query complex code patterns.

With CodeQue, you can easily navigate and modify your codebase, making your development process faster and more efficient.

It will help you with code refactoring, speed up project discovery, and make it easy to find duplicated or similar code patterns.

Advanced code search options and todo-like list of accurate search results will streamline your workflow.

Watch extension in action in 1 minute (external link) 👇

About

One of the main strengths of CodeQue is its easy-to-use query language, but it also offers several additional features that make it a great support tool for your daily work.

Features

• Query language
• Search modes
• Searching by file imports
• Todo-like results list
• Select code to search
• Files list filters
• Case sensitivity
• Search errors

Example Queries

• All usages of console object
• Object with given key and value
• React component with specific props combination
• React bad patterns
• Conditionally set parameter of a function

Don't know how to write a query? Open an issue on GitHub !

Features

Query language

The beauty of CodeQue query language is that the query has to be valid source code. You don't have to learn anything new!

Except the fact there are a few types of wildcards.

$$ is an identifier wildcard.

It matches all identifiers, JSX identifiers, types identifiers, function names and so on.

$$$ is an statement/expression wildcard.

It matches any statement or expression. Think of it as 'match anything'. There a few quirks there. It's good to have general understanding of how code is represented in AST (Abstract Syntax Tree) for more complex queries.

More technically $$$ wildcard is matching any node with all it's children.

Wildcards in strings

Strings have their's own wildcards

$$ - matches 0 or more characters

$$$ - matches 1 or more characters

Number wildcard

0x0- matches any number

Here is an example of query which finds all types of logs which includes word test in parameter 👇

Read more about wildcards and query language in docs

Search modes

CodeQue offers the following search modes

• include
• text
• exact
• include with order

The most useful mode is `include`. As the name suggest the matched code has to include the code from query, but it can also contain other statements. It performs structural comparison.

Learn more about include search mode

text search mode is good replacement of build-in vscode search. It acts like a normal text search, but it's big advantage is that it allows for matching multiline statements. It also offers it's own types of wildcards.

Learn more about text search mode

Sometimes you might want to find the code that matches exactly your query. Here is where exact search mode is useful. It performs structural comparison, so code formatting is not a problem.

Learn more about exact search mode

Last but not least, include-with-order search mode can be useful in some rare cases. Same like include mode it matches code structurally and allows for missing parts, but in addition, it require the order to match.

Learn more about include-with-order search mode

Here is the example of include mode matching function body containing statements from query 👇

Searching by file imports

Cool feature of CodeQue is ability to search within files that are directly and indirectly imported by given entry point. CodeQue generates file's dependency tree and search through all nodes. Simply file dependency based search.

It's handy for finding whether a given module is used in given part of application or find a code causing a bug when proper stack trace is not available.

To get started you can enter the file path manually in search settings.

However easier way of searching by file imports is to use option CQ: Search by Entry Point in file explorer context menu 👇

Todo-like results list

Ability to manage search results list is very handy for refactoring. You can collapse or remove not relevant results and mark others as done after you make changes. I've very similar UX to Github Pull Request review view.

Select to search

Another handy addition is the possibility to search by code selected in editor, so you don't have to copy-paste the query. It's just faster.

After making a selection simply click 🔍 Open Search button in Status bar on the bottom of editor, or use context menu option CQ: Open Search.

CodeQue will automatically detect whether select text is valid code and perform search using recently used structural search mode. Otherwise it would fallback to text search mode.

Files list filters

Search wouldn't be useful without ability to filter files list.

You can define glob patters to either include or exclude files from the list.

By default CodeQue is not searching in files ignored by .gitignore

Enable the following flags with caution, as they might significantly downgrade search performance for lager projects.

• Search ignored files
• Search node_modules (for most projects to search node_modules you have to also enable searching by ignored files)
• Search files above 100kb (these are usually bundled files which are structurally heavy due to their size and amount of information)

Example files list settings 👇

Case sensitivity

You can choose whether to compare identifier persisting their original case or do case insensitive match.

Search errors

Sometimes you might encounter some search errors. They will be mostly due to some syntax errors in you source files.

You can check search error details in tooltip available after click the error count message 👇

Query examples

CodeQue is general purpose code search tool. The examples list could be endless. Here are some of them for you to get a glimpse of what's possible. Those are relatively simple, you will definitely find some more complex during day to day work.

Don't know how to write a query? Open an issue on GitHub !

All usages of console object

Searching for console logs, warnings, errors is quite simple use-case and can be achieved using traditional tools, but It's for you to warm up 😁

This query finds all places in the code that can output some (usually unwanted) logs.

console.$$()

Object with given key and value

CodeQue ability to match parts of the objects might be very useful, especially for searching patterns in large JSONs.

This query will match part of an object literal in file or JSON (depending on file extension) regardless of how deeply nested the object is in the structure.

More specifically it will match all objects with at least one address entry with country specified to PL and phone number which is non empty string.

({
  addresses: [{
    country: 'PL'
  }],
  phoneNumber: "$$$"
})

When searching for objects, make sure to use expression brackets ({}). Otherwise CodeQue would parse the query as code block

React component with specific props combination

I found it very useful to find props with specific props combination. Sometimes props depends on each other and we might want to refactor some of them, but how do we determine whether they are used together? We can review long list of results for basic code search, but who has time for that 😉

<Button
  variant="ghost"
  size="sm"
  colorScheme="red"
/>

React bad patterns

This quite simple query highlights usage of object literal as a prop. It could be extracted to variable to upper scope or memoized.

Assuming we use include mode, the object can have 0 or more properties with any values.

<$$
 $$={{}}
/>

This query finds places where a given array is mapped directly in JSX. It could be memoized to make the array reference stable and reduce re-renders.

In include search mode query <$$/> will match components with and without children!

<$$
 $$={
  $$$.map(() => ($$$))
 }
/>

One last example is another variation of the above, this time with inline function that should be memoized using useCallback hook.

Note that we used () => $$$, not () => {}. Triple wildcard will match both function body as a block, but also as an expression.

<$$
 $$={
  () => $$$
 }
/>

Conditionally set parameter of a function

This query was posted by one of CodeQue users. They wanted to find all conditionally set apiMethod parameter of useRequest hook.

We use $$$ to be more generic for matching parts of conditional expression.

useRequest({
  apiMethod: $$$ ? $$$ : $$$
})

Unstable hook reference

Some 3rd party hooks are not implemented correctly and return non-memoized variables.

Let's assume you've found out that confirm callback from useAsyncDialog is unstable.

You can use the snipped below to search for all similar places across the codebase and fix then if necessary.

This is interesting example that links together two statements in the same code block, that does not necessarily have to directly follow each other.

const { confirm } = useAsyncDialog(); 
const $$ = useCallback($$$, [confirm])

Telemetry

Extension collects anonymous telemetry to help me get insights about usage.

It's implemented using @vscode/extension-telemetry and respects you editor telemetry settings.

Learn more about telemetry

Support and feedback

Feel free to use Github Issues to

• ask for help with writing a query
• report a bug or doubt
• suggest feature or improvement

Support and feedback

Feel free to use Github Issues to

• ask for help with writing a query
• report a bug or doubt
• suggest feature or improvement