Force Code (Appearance) Editor to Use Spaces Not Tabs

We use SASS when building custom themes, and sometimes clients need a quick change made which is easier to do on the server rather than locally and pushing new changes. To that end, we've installed SASS on our server to watch for file changes. The problem is, if we use the WordPress Appearance Editor to edit SASS files, it defaults to tabs instead of spaces and we use spaces in the office. So SASS compiler (transpiler?) throws an error.

Is there any way to force the WordPress Appearance Editor to use Spaces instead of Tabs? I tried a quick search but everything seemed to be related to the WYSIWYG editor in pages/posts.

Topic sass Wordpress

Category Web

1
answered at

The wordpress editor should not be used, end of story. In addition to forcing a security hole, how do you git the changes, how do you test them before applying to production??

The proper solution is to teach your clients the way of the GIT (command line in general), failing that, if all that is needed is CSS changes, they can do it in the customizer, which still violates "best practice" but at least you can test it properly before applying it to the live setup.

1
answered at

The WordPress theme/plugin (file) editor uses CodeMirror for syntax highlighting, and with the hook wp_enqueue_code_editor (which is available starting from WordPress version 4.9.0), you can filter the default CodeMirror settings, as in the following example:

add_filter( 'wp_code_editor_settings', function( $settings ) {
    $settings['codemirror']['indentUnit'] = 2;
    $settings['codemirror']['indentWithTabs'] = false;
    return $settings;
} );

See http://codemirror.net/doc/manual.html#config if you'd like to change other CodeMirror settings.

PS: You'd add the code above to the theme's functions.php file.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.