Unfold Single Method in VSCode

Viewed 202

Is there any keyboard shortcut in VS Code that allows us to unfold a single method and keep the other methods folded?

I am able to fold and unfold all the methods but have not been able to find a way to unfold only a single method

If able to do this, it will allow me to focus on the single method rather than being distracted by all those long lines of code

Eg below... to unfold the getTitle method and keep the other actions folded

import Web3 from "web3";

import Play from "../abis/Play.json";

export const WEB3_LOADED = "WEB3_LOADED";
export const WEB3_ACCOUNT_LOADED = "WEB3_ACCOUNT_LOADED";
export const TOKEN_LOADED = "TOKEN_LOADED";
export const PLAY_LOADED = "PLAY_LOADED";
export const GET_NAME = "GET_NAME";
export const SET_NAME = "SET_NAME";
export const CHANGE_TEST = "CHANGE_TEST";
export const LOAD_ALL_DATA = "LOAD_ALL_DATA";
export const TRANSFER_LOADING = "TRANSFER_LOADING";
export const TRANSFER_LOADED = "TRANSFER_LOADED";

export const loadWeb3 = (eth) => {
  const web3 = new Web3(eth);
  return async (dispatch) => {
    dispatch({
      type: WEB3_LOADED,
      connection: web3,
    });
    return web3;
  };
};

export const loadAccount = (web3) => {
  return async (dispatch) => {
    const accounts = await web3.eth.getAccounts();
    const account = accounts[0];
    dispatch({
      type: WEB3_ACCOUNT_LOADED,
      account,
    });
  };
};

export const loadPlay = (web3, networkId) => {
  return async (dispatch) => {
    try {
      const play = new web3.eth.Contract(
        Play.abi,
        Play.networks[networkId].address
      );
      dispatch({
        type: PLAY_LOADED,
        play,
      });
      return play;
    } catch (error) {
      console.log("Play Contract Not Deployed");
      return null;
    }
  };
};

export const getName = () => {
  return async (dispatch, getState) => {
    const name = await getState().play.play.methods.name().call();
    dispatch({
      type: GET_NAME,
      name,
    });
  };
};

export const setName = (name) => {
  return async (dispatch, getState) => {
    try {
      const { account } = getState().web3;
      const { play } = getState().play;
      play.methods
        .setName(name)
        .send({
          from: account,
        })
        .on("transactionHash", (hash) => {
          dispatch({
            type: SET_NAME,
            name,
          });
        })
        .on("error", (error) => {
          console.error(error);
          window.alert("There was an error setting Name");
        });
    } catch (error) {
      window.alert("Failed to Set Name");
    }
  };
};

export const loadAllData = () => {
  return async (dispatch, getState) => {
    const { play } = getState().play;
    const transferStream = await play.getPastEvents("Transfer", {
      fromBlock: 0,
      toBlock: "latest",
    });
    const allTransferred = transferStream.map((event) => event.returnValues);
    dispatch({
      type: LOAD_ALL_DATA,
      allTransferred,
    });
  };
};

export const subscribeToEvents = () => {
  return async (dispatch, getState) => {
    const { play } = getState().play;
    play.events.Transfer({}, (error, event) => {
      dispatch({
        type: TRANSFER_LOADED,
        payload: event.returnValues,
      });
    });
  };
};

export const transfer = (amount) => {
  return async (dispatch, getState) => {
    const { account } = getState().web3;
    const { play } = getState().play;
    await play.methods
      .transfer(amount)
      .send({
        from: account,
      })
      .on("transactionHash", () => {
        dispatch({
          type: TRANSFER_LOADING,
        });
      })
      .on("error", (error) => {
        console.error(error);
        window.alert("There was an error Transferring");
      });
  };
};

export const getTitle = () => {
  return async (dispatch, getState) => {
    const title = await getState().play.play.methods.title().call();
    console.log(title);
  };
};

export const testDemo = () => {
  return async (dispatch, getState) => {
    console.log(dispatch, getState());
  };
};

export const changeTest = () => {
  return {
    type: CHANGE_TEST,
    name: "ali",
  };
};
2 Answers

Ctrl+Shift+[ folds a region, while Ctrl+Shift+] unfolds a region as noted in the Key Bindings Documentation:

Folding

You need to make sure your cursor is in the correct position as well.

If you want to fold/unfold recursively, you can use Ctrl + K, Ctrl + [ to fold, and Ctrl + K, Ctrl + ] to unfold. This will fold/unfold all regions within a region (i.e. the getTitle() function, and it's return function will get folded/unfolded respectively).

If able to do this, it will allow me to focus on the single method rather than being distracted by all those long lines of code

Another approach, delivered first in VSCode 1.70, and confirmed with VSCode 1.71 (Aug. 2022, available in VSCode Insiders) is sticky scroll.

editor.stickyScroll.enabled

Shows the nested current scopes during the scroll at the top of the editor.

It is now possible to display UI showing which scope the user is in during scrolling.
The "sticky scroll" UI will show which class/interface/namespace/function/method/constructor the top of the editor is in, helping you know the location within a document.

https://github.com/microsoft/vscode-docs/raw/vnext/release-notes/images/1_70/sticky-scroll.gif

That way, you always know what you are looking at.


For non-supported languages, Sticky Scroll can work on indent, with VSCode 1.72 (Sept. 2022).

Sticky Scroll based on indent

Related