iT邦幫忙

0

想問一下VS code 裡面 JS PHP 的 Formatter

  • 分享至 

  • xImage

我想要把我的程式碼排行的整齊一點,常見的一些別人寫的 js 或者 php 都有將等號變數之類的排版在同一列,但我卻找不到這類的工具?

例如 Javascript 原本長這樣

this.duration = opts.duration || 1;
    this.debug = opts.debug || false;
    this.easing = opts.easing || "easeInOut";
    this.container = document.getElementById("msg_slide");
    this.images = JSON.parse(this.container.getAttribute("data-images"));
    this.textObj = document.getElementById('ms_text');
    this.msAni = this.textObj.querySelectorAll('.ms_aniIn');
    this.width = this.container.offsetWidth;
    this.height = this.container.offsetHeight;

想要一鍵變成以下

    this.duration  = opts.duration || 1;
    this.debug     = opts.debug || false;
    this.easing    = opts.easing || "easeInOut";
    this.container = document.getElementById("msg_slide");
    this.images    = JSON.parse(this.container.getAttribute("data-images"));
    this.textObj   = document.getElementById('ms_text');
    this.msAni     = this.textObj.querySelectorAll('.ms_aniIn');
    this.width     = this.container.offsetWidth;
    this.height    = this.container.offsetHeight;

或者 PHP 原本長這樣

  register_post_type(
    'events',
    array(
      'labels' => array(
        'name' => __('作品'),
        'singular_name' => __('作品'),
        'add_new_item' => __('新增作品'),
        'edit_item' => __('編輯作品'),
        'add_new' => __('新增活動')
    )
  );

想要一鍵變成以下

  register_post_type(
    'events',
    array(
      'labels' => array(
        'name'          => __('作品'),
        'singular_name' => __('作品'),
        'add_new_item'  => __('新增作品'),
        'edit_item'     => __('編輯作品'),
        'add_new'       => __('新增活動')
    )
  );

我使用了 Prettier - Code formatter、PHP intelliSense、其他 Online 的 Beautifull code 之類的都沒辦法這樣排版噎0.0?

不知道是否有大大知道這樣的排版叫做什麼?感激!

ccutmis iT邦高手 2 級 ‧ 2020-11-26 10:51:45 檢舉
可能叫作 "code beautify"? ...試試 google 搜:
vscode beautify php
其實各種文字編輯器都有類型的外掛,以我用過的幾種來舉例 atom, subslime,notepad++,vscode在google搜尋關鍵字:
"文字編輯器名 beautify php'' 都可以找到適用的外掛可用。
我試過了各種 formatter, beautify code 之類的都不行呢,最主要是無法讓等號同一行。
...
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
2
japhenchen
iT邦超人 1 級 ‧ 2020-11-26 07:47:52

按Ctrl+Shift+X,輸入PHP IntelliSense,安裝,重開code

在開啟php的程式時,按下SHIFT + ALT + F就自動格式化

看更多先前的回應...收起先前的回應...

幾乎所有語言,包括html,css,json...都有很好用的格式化工具

用了vscode之後,我都不再使用其他的文字編輯器了,這根本是神器啊

qwer2561 iT邦研究生 5 級 ‧ 2020-11-27 15:44:36 檢舉

vscode 真的好用!!

我也是使用 Vscode呢,我有裝PHP IntelliSense,可是無法讓 => 或者變數的等號全部排在同一列?
請問大大有另外設定客製化的規則嗎?

又不是只有一個formatter可用,多試試幾個,找出適合你的那一個

0

很難能這樣的排版。
畢竟一般要達到你這樣的需求,大多數都是得用tab排板才有可能。
重點在於一次還是兩次。這是自動排版無法處理的事。
也很難下排版規則。

這個幫不了你。

0
海綿寶寶
iT邦大神 1 級 ‧ 2020-11-26 09:53:25

Visual Studio 有 Align Assignments 的 extension
2015 年的文章
現在不知道還有沒有

好像還有,不過很難定義好就是。
有一個區間範圍。
我之前用vs有搞過。也想用這樣的排版。

但還是跑板的很嚴重。(也可能是我的定義寫的不夠好)
後來因為公司開發要統一排版。就還是使用預設的了。

0
sorcererapp
iT邦新手 5 級 ‧ 2021-09-13 22:01:21

之前放了在Comment,原來有回答框,抱歉,我會把那個刪掉。

可以的,要先在系統安裝php code sniffer,然後在VSCode裹安裝 PHP Sniffer & Beautifier,php code sniffer 裹面還有一個好處,可以安裝WordPress Code Style 標準,那麼在跑的時候會自動做Checking,這個動作叫 Lint,你可以在VSCode裹設定 Format on Save,那麼每次在save時都會套用相關標準。當然個別情況亦可個別設定不跟隨。

我要發表回答

立即登入回答