How to Integrate CSS Pre-Processing Within Eclipse

How to integrate CSS pre-processing within Eclipse?

I just figured out how to do this in Eclipse. I admit that this solution does not have 100% SASS support, the colors get a little funky when using nested css, but it's waaaaay better than looking at plain text and you don't need to install a separate editor.

You need to associate the .scss file type with the native Eclipse CSS Editor in Eclipse[Part 1]. After you do that, you need to add the .scss file type to the native CSS Editor as well so the CSS Editor will be able to open it [Part 2]. Here are the steps for eclipse (I'm running Eclipse Java EE IDE for Web Developers, Indigo):

Part 1 - Associate the .scss file type with the native Eclipse CSS Editor

Go to Window > Preferences
Drill down to General > Editors > File Associations
In File Associations pane, click the 'Add..." button on the top right.
For File Type:, enter *.scss and then click OK.
Find the *.scss entry in the File Associations list and select it.
After selecting *.scss, on the bottom pane Associated editors:, click the Add... button.
Make sure Internal editors is selected on the top, then find and select CSS Editor and then click OK.

This associated the file type .scss with eclipses native CSS Editor. Now we have to configure the native CSS Editor to support .scss files. To do this, follow this steps:

Part 2 - Add the .scss file type to the native CSS Editor

Go to Window > Preferences
Drill down to General > Content Types
In the Content Types pane, expand Text, then select CSS
After CSS is selected, on the bottom File associations: pane, click the Add... button.
For Content type:, enter *.scss and then click OK.
Click OK to close out the Preferences window.

All done. All you need to do now is close any .scss files that you have open then re-open them and wha-la, css colors in Eclipse for .scss files!

Note: If the css colours do not appear you may have to do the following: Right click the .scss file > Open With > CSS Editor.

Using Haml & Sass with Eclipse

Well, what about Aptana? According to the Haml/Saas Syntax Highlighting in Aptana/Eclipse blog post:

Recently, I have been using Haml in
some my Rails projects. It simply
makes your views clean and readable.
One issue I had was syntax
highlighting in my favorite IDE,
Aptana Studio. The Haml syntax
highlighting support has been stopped
a while ago and more issues have
raised after Aptana recent updates.

After some research, I found a
solution posted by Max Kostovetski, a
member of Haml Google group. Now, to
the steps:

Download the following files to your hard drive:>

http://haml.googlegroups.com/web/haml_lexer.lxr

http://haml.googlegroups.com/web/haml.col

http://haml.googlegroups.com/web/sass_lexer.lxr

http://haml.googlegroups.com/web/sass.col

From ~~Aptana~~Eclipse "Window" menu, select "Preferences..."

In the the preferences window, select "Editors" > "Generic Text"

Press "Add..." to add new file extensions: *.haml and *.sass

For each of the new extensions, click it and press "Browse..." to
select the proper lexer file (*.lxr)

For colorization, press "Import..." to import the *.col files

Press "OK"

Enjoy you Haml views

PS: Refer to the original blog post as it provides up-to-date links.

Note: this can be used with the Aptana RadRails Eclipse plugin as well as Aptana Studio

UPDATE: At the time of writing, RadRails and Studio seems to support Haml and Sass so it might now be unnecessary to follow the steps above.

To compile SaaS in an "integrated" way inside Eclipse, you could maybe just use an External Tool (Run > External Tools). Another more elaborated option would be to add a "Program Builder" to your project's Builders like in this blog post. Of course, the described solution would require to be adapted to Saas but the principles behind it seems to apply. Caution: I didn't implement it myself, it's just an idea and I'm not even sure it makes sense.

Change Format of css Stylesheets in Eclipse

The Aptana Studio plugin for eclipse has a formatter that's pre-configured according to your needs.

I recommend using it regardless as it ease up the development process a great deal for web developers (all sorts of nifty features like built-in Git integration, code assist for common JavaScript libraries, integrated FTP client, embedded AJAX server [Jaxer], nice themes included, etcetera, etcetera...).

References:

Aptana Studio download page

Eclipse Syntax Highlighting for HTML Files with script type=tmpl_handlebars

If you are using PHP, you can fool Eclipse by adding empty php tag:

<scrip<?php ?>t type="tmpl_handlebars" id="tmpl_places">
    <article> 
       <h1> 
          ...
       </h1>
    </article>
</script>

how to integrate ReactJs with Spring MVC in eclipse

Try to create a view(jsp/html/xhtml) and link the UI build output to that. you may use webpack as a build tool for UI(React) which will return bundle file.

Then it can be included to view using script tag. Please note you can use webpack-dev-server for UI development and try to use Proxy to consume the spring-mvc service. Its a recommended way. A folder containing all the JS under webapp can be used if your using Maven as build tool for java.

webpack reference : https://webpack.js.org/

Sample Webpack.config.js for reference.

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        main: './src/scripts/main.js',
        engine: './src/scripts/engine/Engine.js',
        debugger: './src/scripts/debug/Debugmain.js',
        client: './src/scripts/clientcode/Client.js'
    },
    output: {
        path: path.resolve('./dist/client'),
        filename: '[name].js',
        publicPath: '/dist/client/',
        chunkFilename: '[name].js'
    },
    devtool: 'inline-sourcemap',
    cache: true,
    resolve: {
        alias: { ByteBuffer: 'bytebuffer' }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'react-hot-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015'],
                    compact: false
                }
            },
            {
                enforce: 'pre',
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: [path.join(__dirname, './src', 'scripts')],
                loader: 'eslint-loader'
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    loader: 'css-loader?sourceMap!less-loader?sourceMap'
                })
            },
            {
                test: /\.(eot|woff|woff2|ttf|otf|png|jpg)$/,
                loader: 'file-loader?name=images/[name].[ext]'
            }
        ]
    },
    devServer: {
        port: 8080,
        stats: 'errors-only',
        proxy: {
            '/api': {
                target: 'http://localhost:20404', //http://localhost:20403/',
                secure: false
            }
        },
        historyApiFallback: {
            index: 'debug.html'
        }
    },
    plugins: [
        new ExtractTextPlugin({
            filename: './styles/main.css',
            allChunks: true
        })
    ],
    resolve: {
        modules: ['src/scripts', 'node_modules'],
        extensions: ['.jsx', '.js'],
        unsafeCache: true,
        alias: {
            components: path.resolve(__dirname, 'src', 'scripts', 'components'),
            routes: path.resolve(__dirname, '.', 'routes'),
            draggable_tab: path.resolve(__dirname, 'src', 'scripts', 'lib'),
            utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
            engine: path.resolve(__dirname, 'src', 'scripts', 'engine')
        }
    }
};

How to Integrate CSS Pre-Processing Within Eclipse