tag:blogger.com,1999:blog-13837629480321736712024-03-21T14:18:10.015+01:00The Chef ProgrammerProgramming & cookingAnonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-1383762948032173671.post-6374199698822173702014-05-19T22:36:00.001+02:002014-05-19T22:42:41.355+02:00Syntax check for PHP and JavaScript inside VimMany development tools such as Visual Studio or Eclipse have a feature to automatically detect <b>syntax errors</b> when writing code.<br />
<br />
This feature is also available inside <b>Vim</b> using a very good plugin called <a href="https://github.com/scrooloose/syntastic" style="font-weight: bold;" target="_blank">syntastic</a> (it is provided by the same author of another great plugin called <i>The NERD Tree</i>).<br />
This plugin makes it possible to detect syntax and style errors of a wide range of programming languages and it highlights the affected rows of code.<br />
<br />
In this article I will explain how to install syntastic and how to enable the syntax check for PHP and JavaScript in a Windows environment.<br />
If you are working on a Linux or a Mac you should still be able to follow and adapt the various steps.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16aiJwodxbmG7yYe0lkNTaKPIzjntIUrrRftDufXf3gVbzstydV-OedTA4F9iFw40eiktbXkGUqk5OVo3H24PPGnIGTm4XCiipDwX8KagiqeTaz_D-zfMbgDPPPmSp2-fpiCK0RQ-PWg/s1600/11+-+Syntastic.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16aiJwodxbmG7yYe0lkNTaKPIzjntIUrrRftDufXf3gVbzstydV-OedTA4F9iFw40eiktbXkGUqk5OVo3H24PPGnIGTm4XCiipDwX8KagiqeTaz_D-zfMbgDPPPmSp2-fpiCK0RQ-PWg/s1600/11+-+Syntastic.PNG" height="198" width="400" /></a></div>
<br />
<h2>
About Vim</h2>
<br />
This article assumes that you already know Vim's fundamentals and you are able to install a plugin.<br />
If you would like to know more about Vim, a very good and powerful open-source editor, you can find a lot of online tutorials, for example:<br />
<br />
<ul>
<li><a href="http://vim.wikia.com/wiki/Tutorial">http://vim.wikia.com/wiki/Tutorial</a> (a wiki entirely devoted to Vim)</li>
<li><a href="http://vimcasts.org/">http://vimcasts.org/</a> (a series of videos about Vim)</li>
<li><a href="http://www.vim.org/">http://www.vim.org/</a> (the official site where you can download the program)</li>
</ul>
<br />
If you prefer a book to learn or know more about Vim I highly recommend a manual called <b>Practical Vim</b> (on Amazon.com it has more than forty 5-stars reviews). It is currently the best book around for this subject:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.amazon.com/gp/product/1934356980/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1934356980&linkCode=as2&tag=thechepro-20&linkId=EBEYTPLKIHI2ONQJ" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://ecx.images-amazon.com/images/I/41DZSBfwndL._SX258_BO1,204,203,200_.jpg" /></a>
<img alt="" border="0" src="http://ir-na.amazon-adsystem.com/e/ir?t=thechepro-20&l=as2&o=1&a=1934356980" height="1" style="border: none !important; margin: 0px !important;" width="1" /></div>
<br />
<h2>
Installation</h2>
The best way to install syntastic is to use <a href="https://github.com/tpope/vim-pathogen">pathogen.vim</a>, a plugin which can be used to manage and install other plugins while keeping them on their respective folder. If you already have installed pathogen on your system, please jump to the next section.<br />
<br />
<h3>
Installing pathogen.vim</h3>
<br />
In order to install pathogen you can take the following steps:<br />
<br />
<ol>
<li>Download the file pathogen.vim from <a href="http://www.vim.org/scripts/script.php?script_id=2332">http://www.vim.org/scripts/script.php?script_id=2332</a></li>
<li>Open Vim's plugin directory, usually located at <span style="font-family: inherit;"><i>%USERPROFILE%\vimfiles</i> (eg. <i>C:\Users\Luca\vimfiles\</i>)</span>. In a Linux environment the directory is named <i>.vim</i> and it's a hidden directory</li>
<li>Copy the file you downloaded in step 1 into the <i>autoload</i> folder</li>
<li>Create a new folder named <i>bundle</i> into the previous <i>vimfiles</i> folder</li>
<li>Open the <i>_vimrc</i> file (<i>.vimrc</i> in a Linux environment) usually located in <i>%USERPROFILE% </i>(eg. <i>C:\Users\Luca\_vimrc</i>) and add the following line:<br /><span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">execute pathogen#infect()</span></li>
</ol>
<div>
<br /></div>
<div>
Now all the new plugins can be easily installed by copying them into the <i>bundle</i> folder and pathogen will start them automatically.</div>
<div>
<br />
In order to load the help and documentation for each installed plugin you could type:</div>
<div>
<div>
<br /></div>
<div>
<span style="background-color: #eeeeee; font-family: Courier New, Courier, monospace;">:Helptags</span><span style="background-color: white; font-family: inherit;"> <i>(Note the capital H)</i></span></div>
</div>
<br />
<h3>
Installing syntastic</h3>
<br />
In order to install syntastic you can download the main zip file from <a href="https://github.com/scrooloose/syntastic">https://github.com/scrooloose/syntastic</a> and extract it into the <i>syntastic</i> folder inside the <i>bundle</i> folder you have previously created. Alternatively you can just clone the git repository on GitHub (always into the <i>bundle</i> folder).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXZAojjzNrlGKgcAt3sEwIe4-C1BeSYiDP4bTXKQ0W_CpNhnybe0SmM1CM1IsDXkq74OIsi7yY9bFCLDBdA3u8OVcTFL7eVW_P1g3cmgXbKVEUND3NnGD9eAY2failH6qASVqRjkPxnA/s1600/13+-+syntastic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXZAojjzNrlGKgcAt3sEwIe4-C1BeSYiDP4bTXKQ0W_CpNhnybe0SmM1CM1IsDXkq74OIsi7yY9bFCLDBdA3u8OVcTFL7eVW_P1g3cmgXbKVEUND3NnGD9eAY2failH6qASVqRjkPxnA/s1600/13+-+syntastic.png" height="251" width="400" /></a></div>
<br />
Once installed, you can type <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:Helptags</span> to load the documentation. In this way you can type <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:h syntastic</span> to see the help.<br />
<br />
<h2>
Basic usage</h2>
<br />
Once installed, syntastic is automatically activated, assuming that it manages to find a suitable <b>checker</b> for the current programming language.<br />
As already mentioned, in this article I will show how to install a checker for PHP and JavaScript, but you should be able to install a checker for another language with little effort.<br />
<br />
<h3>
PHP checker</h3>
<br />
Open a new terminal window with <i>cmd</i> and write <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">php -v</span> on the command line.<br />
If you can see a result similar to the one in the picture below, then the php intepreter is already on your system path and you can skip to the following paragraph.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheoeyt4qU7nv61XzclZcqnf7V0kZHX0EIP62uUnl_zx7bS9hi0coxp1HLc-hrMaGFpoFqsO-vSYBS0HAzzDWBDspWXCzDnBfiEC-xMxMsgkemINvxQQjHMTaEPlmh9-eNcvSKK_veFeXA/s1600/1+-+PHP+Version.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheoeyt4qU7nv61XzclZcqnf7V0kZHX0EIP62uUnl_zx7bS9hi0coxp1HLc-hrMaGFpoFqsO-vSYBS0HAzzDWBDspWXCzDnBfiEC-xMxMsgkemINvxQQjHMTaEPlmh9-eNcvSKK_veFeXA/s1600/1+-+PHP+Version.PNG" height="201" width="400" /></a></div>
<br />
If you receive an error which says that php is not a valid command, then you must add the php interpreter path to the system environment variables. I use Xampp so php is located in <i>C:\xampp\php</i>. You should add the following string to the PATH variable:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrvVLVHwsMijP0Y_LpTPTuAj1NjAJFimXNdnMBanf7tbhFMyCgfDcITHsHy7ZoXjUJHss0rSXnXDn5xL8JlTLW0hR58Bkwa01QlqAafKjx_ydYN-aMtVpefVAl4V4MTTxtdu1g__cbyQ/s1600/2+-+Path.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrvVLVHwsMijP0Y_LpTPTuAj1NjAJFimXNdnMBanf7tbhFMyCgfDcITHsHy7ZoXjUJHss0rSXnXDn5xL8JlTLW0hR58Bkwa01QlqAafKjx_ydYN-aMtVpefVAl4V4MTTxtdu1g__cbyQ/s1600/2+-+Path.PNG" height="400" width="361" /></a></div>
<br />
Once added to the PATH variable, restart the terminal and try again digit <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">php -v</span>. You should now see the installed version of PHP.<br />
<br />
Now open a PHP file and digit <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:SyntasticInfo</span> to see which checkers can be enabled:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaje5Z7Vhjww8RZU9P1t_RWw5ZhliQ_TW7Regs3ImKanqzPlW6r3Q_qz66k4dmpRDogOb41EU3YBplHB4vboRrb5aoTlBKgl-BndX28vYKgfRaLl7OcC3fzd8Y4r5VY_gq_c2ADlbCGY/s1600/3+-+SyntasticInfo.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaje5Z7Vhjww8RZU9P1t_RWw5ZhliQ_TW7Regs3ImKanqzPlW6r3Q_qz66k4dmpRDogOb41EU3YBplHB4vboRrb5aoTlBKgl-BndX28vYKgfRaLl7OcC3fzd8Y4r5VY_gq_c2ADlbCGY/s1600/3+-+SyntasticInfo.PNG" height="318" width="400" /></a></div>
<br />
The default PHP checker is <i>phpcs</i> (<a href="http://pear.php.net/package/PHP_CodeSniffer/redirected">PHP CodeSniffer di Pear</a>) but it turns out to be a bit too picky for my taste (e.g. it will highlight as an error the fact that the line terminator is <i>\r\n</i> instead of <i>\n</i>).<br />
In order to set another default checker for PHP files open the _vimrc file and add the following line:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_php_checkers = ['php']</span></span><br />
<br />
Reload the _vimrc file with <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:source $MYVIMRC</span> (or close and reopen Vim).<br />
<br />
By default syntastic will automatically activate every time <b>a file is written to the disk</b> (for example when you write <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:w myfile.php</span>) or manually when typing the <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:SyntasticCheck</span> command. Please note that syntastic will analyze <b>saved files only</b>, it will not consider unsaved changes!<br />
<br />
If there are any errors, syntastic will highlight the corresponding lines and will show a tooltip with a descriptive message. In the next picture I have omitted a parenthesis and syntastic is highlighting the row. If you put your mouse over the line you will see a tooltip.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnhlplg6BUKVuS14z6NmrlNa0BgnfhF_fp276HjHUSMdiTMBBZpklJwEa2qRGvaubffz4C6_0ZOR7nsvTkB6ILVRWZjuxBx82ALEI_SZ29ZOBD6FCz-yEk-T-9qDhdSdloQoc8d9y8yQ/s1600/4+-+Syntax+error.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnhlplg6BUKVuS14z6NmrlNa0BgnfhF_fp276HjHUSMdiTMBBZpklJwEa2qRGvaubffz4C6_0ZOR7nsvTkB6ILVRWZjuxBx82ALEI_SZ29ZOBD6FCz-yEk-T-9qDhdSdloQoc8d9y8yQ/s1600/4+-+Syntax+error.PNG" height="318" width="400" /></a></div>
<br />
Using the command <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:Errors</span> you can open a list with all the errors along with their descriptive message and line number. To close the list, simply type the command <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:lclose</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAl-RGW4MYbIyksgcn4gjXqhrt42yy_0b2YSphvAtyIKztusTY6VLRyDY_gT_cSd24DFW_4s4e8ezm-U8O7LYWzoCoZLIDpZywnyYoCGhozHSaLJ2EtrccX0OV95GF-qCnuh42bSKZiQ/s1600/5+-+Error+list.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAl-RGW4MYbIyksgcn4gjXqhrt42yy_0b2YSphvAtyIKztusTY6VLRyDY_gT_cSd24DFW_4s4e8ezm-U8O7LYWzoCoZLIDpZywnyYoCGhozHSaLJ2EtrccX0OV95GF-qCnuh42bSKZiQ/s1600/5+-+Error+list.PNG" height="318" width="400" /></a></div>
<br />
Now you just have to fix all the errors found by syntastic!<br />
<br />
We'll see in the next section how to install a checker for JavaScript files.<br />
<br />
<h3>
Checker per JavaScript e jQuery</h3>
<br />
As for JavaScript (and jQuery of course!) the process will be similar but we're going to install <b>JSHint</b> as the default checker.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVuU8gynRxTFhgDn2aFznHQz2SpqvfSGAzaiNVePD9umVUh6rgtg4pO4Xhb21gAa1tl5Z1s2vGPJkfv1zZqFwxd3p00BDEG3tlvbPDJp3IKR8CQsB1NtsrY-jisRbaQ6nJQueJsnk_TEs/s1600/6+-+JSHint.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVuU8gynRxTFhgDn2aFznHQz2SpqvfSGAzaiNVePD9umVUh6rgtg4pO4Xhb21gAa1tl5Z1s2vGPJkfv1zZqFwxd3p00BDEG3tlvbPDJp3IKR8CQsB1NtsrY-jisRbaQ6nJQueJsnk_TEs/s1600/6+-+JSHint.PNG" height="92" width="400" /></a></div>
<br />
First you will need to install Node.js. You can download the Windows installer at <a href="http://nodejs.org/download/">http://nodejs.org/download/</a><br />
<br />
Once installed, open the Node.js command prompt and use the <i>npm package manager</i> to install JSHint by typing the following statement:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">npm install jshint -g</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_tG6XdFvPSYMnF84j1XkZjxOtm9pX8n9SUG7sIMhBf8Y3N6zbtbgx6fVoBomefobHmxDoOzuVLrelFMLo4-_xMH62p9QYN-KnOBF4EMJdxM18LKTBMxTYRUrIGGga4ToJop_qf7ZedWs/s1600/7+-+npm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_tG6XdFvPSYMnF84j1XkZjxOtm9pX8n9SUG7sIMhBf8Y3N6zbtbgx6fVoBomefobHmxDoOzuVLrelFMLo4-_xMH62p9QYN-KnOBF4EMJdxM18LKTBMxTYRUrIGGga4ToJop_qf7ZedWs/s1600/7+-+npm.png" height="201" width="400" /></a></div>
<br />
Open a JavaScript file and type <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:SyntasticInfo</span> to see which checker are enabled:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNdY1yT_fGWUGzNEn0Lh8bhAolPPAcQpYJ-AHyxPKBQtx94Jurous_gKdyhM1OUHBNGZycZ_Ltkca43QcgcII0sWAELO_tRLb0XsPuVVzTFU0Cnbg9Nhtw338sLTU4V69ltdzz95q2jM/s1600/8+-+SyntasticInfo+(JS).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNdY1yT_fGWUGzNEn0Lh8bhAolPPAcQpYJ-AHyxPKBQtx94Jurous_gKdyhM1OUHBNGZycZ_Ltkca43QcgcII0sWAELO_tRLb0XsPuVVzTFU0Cnbg9Nhtw338sLTU4V69ltdzz95q2jM/s1600/8+-+SyntasticInfo+(JS).PNG" height="318" width="400" /></a></div>
<br />
As mentioned before By default syntastic will automatically activate every time <b>a file is written to the disk</b> (for example when you write <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:w </span><span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">jquery-myplugin.js</span>) or manually when typing the <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:SyntasticCheck</span> command. Please note that syntastic will analyze <b>saved files only</b>, it will not consider unsaved changes!<br />
<br />
Lines with syntax errors, warnings or coding hints will be underlined and a tooltip will appear when placing the cursor above them.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMr3WwGMktAPNjX2P9JalK0Q8jRqrob6XbyFBEx7C7WVJpU4XjssdJ1dnoRnxj6A05jJoKlpjXERR5w9AQurznaDGzH3D1TV41q2qTQtqSvdRFF0x4QjaP5OKjGuY_XjAR_SnBPuWa3A/s1600/9+-+Syntax+error+(JS).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMr3WwGMktAPNjX2P9JalK0Q8jRqrob6XbyFBEx7C7WVJpU4XjssdJ1dnoRnxj6A05jJoKlpjXERR5w9AQurznaDGzH3D1TV41q2qTQtqSvdRFF0x4QjaP5OKjGuY_XjAR_SnBPuWa3A/s1600/9+-+Syntax+error+(JS).PNG" height="318" width="400" /></a></div>
<br />
The <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:Errors</span> command will open a list with all the error messages and the corresponding line numbers.<br />
Pressing enter or when you double click on a line will move you directly to the corrisponding position of the error.<br />
To close the list, simply type the command <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:lclose</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO07MN6-LB3V4fVqmZYUzIC6o7mSRVGt3tgZbcSsNMH_VsWrGWCep9CEyQyXJOuDZRyT83TeKu4ckEfH4AgsQ6iFjGQXKKuuMEP25BIFFST4IwPiu4drwiUo8mzp3Ar6TERlV14qxDwP0/s1600/10+-+Error+list+(JS).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO07MN6-LB3V4fVqmZYUzIC6o7mSRVGt3tgZbcSsNMH_VsWrGWCep9CEyQyXJOuDZRyT83TeKu4ckEfH4AgsQ6iFjGQXKKuuMEP25BIFFST4IwPiu4drwiUo8mzp3Ar6TERlV14qxDwP0/s1600/10+-+Error+list+(JS).PNG" height="318" width="400" /></a></div>
<br />
Now you just have to eliminate all the errors, rinse and repeat until your code will not be ready!<br />
<br />
<h2>
Set the syntax check manually</h2>
<br />
Sometimes it can be too much the fact that the syntax check is activated every time you save a file, but it's possible to configure Vim to execute it only on demand (for example by binding it to a <b>specific hotkey</b>).<br />
<br />
First you need to set syntastic in passive mode; in this way the check will be run only when you execute the command <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:SyntasticCheck</span>.<br />
You also need to set a variable to avoid running the command every time you save a file.<br />
You will need to add the following two lines to the file _vimrc:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_check_on_wq = 0</span></span><br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_mode_map = { 'mode': 'passive' }</span></span><br />
<br />
Now if you want to bind the check to a specific hotkey (F6 in my case), you can do a remap by adding the following line:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">nnoremap <silent> <F6> :SyntasticCheck<CR></span></span><br />
<br />
Now the syntax check will be only executed when you press the F6 key.<br />
<br />
<h2>
Automatically open the list of errors</h2>
<br />
As we saw before, you need to type <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">:Errors</span> to open a list with all the errors found in the file.<br />
In order to automatically open the list every time the syntax check is run, you just need to add the following line to the file _vimrc:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_auto_loc_list = 1</span></span><br />
<br />
<h2>
Ignore style errors</h2>
<br />
Many of the checkers (e.g. JSHint) are able to distinguish between three different type of errors:<br />
<br />
<ul>
<li><b>Errors</b><br />The <i>real</i> errors (for example a missing bracket)</li>
<li><b>Warnings</b><br />Warning messages which do not usually stop the execution of the code but it is recommended to fix</li>
<li><b>Style</b><br />These are style "errors" (such as indenting rules or best practices)</li>
</ul>
<br />
Sometimes you just want to detect real errors or warnings, maybe because you are using different conventions and you don't want to be "bothered" by unnecessary messages (in the case of PHP, the checker phpcs will detect a style error if your line terminating characters will be <i>\r\n</i> by default in Windows instead of just <i>\r</i>).<br />
<br />
Although they can be useful, you can silence these warnings by adding the following line to our _vimrc file::<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_quiet_messages = { "type": "style" }</span></span><br />
<br />
All the instructions added so far by this post are the following:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7vJWP24Ngc5apuD1yZWMFjaWqU6Jq9VGIv8WDOompFIXDlNCB6qLvK9nao7BFk5Apjz_PEdAv3ESn1nhA_NA5-pFTM-3ikgPFsVH2tqbK1cied0VaCYm70vjkw-INDHzackJego1k5Eg/s1600/12+-+vimrc.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7vJWP24Ngc5apuD1yZWMFjaWqU6Jq9VGIv8WDOompFIXDlNCB6qLvK9nao7BFk5Apjz_PEdAv3ESn1nhA_NA5-pFTM-3ikgPFsVH2tqbK1cied0VaCYm70vjkw-INDHzackJego1k5Eg/s1600/12+-+vimrc.PNG" height="76" width="400" /></a></div>
<br />
To view the additional options available for this plugin and for more information about the available checkers you can always read the very good documentation by typing <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">h: syntastic</span><br />
<br />
I hope this article will help you developing quality code in a better way and expecially help you finding your code error faster!Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com1tag:blogger.com,1999:blog-1383762948032173671.post-8146808301303603992014-05-19T22:27:00.003+02:002014-05-19T22:46:38.152+02:00Check della sintassi per PHP e JavaScript in VimUna funzione molto utile presente in numerosi strumenti di sviluppo (i cosiddetti <i>IDE</i> come Visual Studio, Eclipse, NetBeans ecc…) è la possibilità di individuare eventuali <b>errori di sintassi</b> durante la scrittura del codice.<br />
<br />
Questa funzionalità è disponibile anche per <b>Vim</b> utilizzando un ottimo plugin chiamato <b><a href="https://github.com/scrooloose/syntastic" target="_blank">syntastic</a></b> (l’autore è lo stesso di un altro plugin molto famoso e utilizzato: <i>The NERD Tree</i>).<br />
Questo permette infatti di individuare eventuali errori di sintassi o di stile evidenziando le righe interessate e supporta una grande varietà di linguaggi.<br />
<br />
In questo articolo vedremo come installare syntastic e come abilitare il controllo della sintassi per PHP e JavaScript in ambiente Windows.<br />
Se lavorate in ambiente Linux o Mac dovreste comunque essere in grado di seguire e adattare i vari passaggi.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16aiJwodxbmG7yYe0lkNTaKPIzjntIUrrRftDufXf3gVbzstydV-OedTA4F9iFw40eiktbXkGUqk5OVo3H24PPGnIGTm4XCiipDwX8KagiqeTaz_D-zfMbgDPPPmSp2-fpiCK0RQ-PWg/s1600/11+-+Syntastic.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16aiJwodxbmG7yYe0lkNTaKPIzjntIUrrRftDufXf3gVbzstydV-OedTA4F9iFw40eiktbXkGUqk5OVo3H24PPGnIGTm4XCiipDwX8KagiqeTaz_D-zfMbgDPPPmSp2-fpiCK0RQ-PWg/s1600/11+-+Syntastic.PNG" height="198" width="400" /></a></div>
<br />
<h2>
Premessa su Vim</h2>
<br />
Questo articolo parte dal presupposto che conosciate già le basi Vim e che siate in grado di installare un plugin.<br />
Se vi interessa sapere di più su Vim, un editor molto potente free e open source, potete trovare numerosissimi tutorial in rete, ad esempio:<br />
<br />
<ul>
<li><a href="http://vim.wikia.com/wiki/Tutorial">http://vim.wikia.com/wiki/Tutorial</a> (una wiki interamente dedicata a Vim)</li>
<li><a href="http://vimcasts.org/">http://vimcasts.org/</a> (una serie di video a proposito di Vim)</li>
<li><a href="http://www.vim.org/">http://www.vim.org/</a> (il sito ufficiale da cui scaricare il programma)</li>
</ul>
<br />
Se invece volete un libro per conoscere o approfondire Vim vi consiglio caldamente questo manuale chiamato <b>Practical Vim</b> (su Amazon.com ha 44 recensioni tutte da 5 stelle). Credo che attualmente non esista un libro migliore disponibile sull’argomento:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.amazon.it/gp/product/1934356980/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=3370&creative=23322&creativeASIN=1934356980&linkCode=as2&tag=thechepro-21"><img border="0" src="http://ecx.images-amazon.com/images/I/41DZSBfwndL._SX258_BO1,204,203,200_.jpg" /></a><img alt="" border="0" src="http://ir-it.amazon-adsystem.com/e/ir?t=thechepro-21&l=as2&o=29&a=1934356980" height="1" style="border: none !important; margin: 0px !important;" width="1" />
</div>
<br />
<h2>
Installazione</h2>
<br />
Il modo migliore per installare syntastic è sicuramente quello di utilizzare <a href="https://github.com/tpope/vim-pathogen">pathogen.vim</a>, un plugin che permette di gestire e installare facilmente altri plugin mantenendoli ordinati nelle loro rispettive cartelle. Se avete già installato pathogen.vim saltate pure alla sezione seguente.<br />
<br />
<h3>
Installazione di pathogen.vim</h3>
<br />
Per installare pathogen basterà seguire i seguenti step:<br />
<br />
<ol>
<li>Scaricate il file pathogen.vim all’indirizzo <a href="http://www.vim.org/scripts/script.php?script_id=2332">http://www.vim.org/scripts/script.php?script_id=2332</a></li>
<li>Aprite la cartella contenente i plugin di Vim, solitamente situata in<span style="font-family: inherit;"> <i>%USERPROFILE%\vimfiles</i> (es. <i>C:\Users\Luca\vimfiles\</i>)</span>. In ambiente Linux la cartella è nascosta e si trova nella home con il nome di <span style="font-family: inherit;"><i>.vim</i></span></li>
<li>Copiate il file scaricato al punto 1 all’interno della cartella <i>autoload</i></li>
<li>Tornate nella cartella <i>vimfiles</i> e create una nuova cartella di nome <i>bundle</i></li>
<li>Aprite il file <i>_vimrc</i> (<i>.vimrc</i> in ambiente Linux) che si trova sempre in <i>%USERPROFILE%</i> (es. <i>C:\Users\Luca\_vimrc</i>) o nella home e aggiungete la seguente linea<br /><br /><span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">execute pathogen#infect()</span></span></li>
</ol>
<div>
<br /></div>
<div>
In questo modo tutti i plugin potranno essere installati semplicemente inserendoli all’interno della cartella <i>bundle</i> e pathogen.vim li caricherà automaticamente.</div>
<div>
<br /></div>
<div>
Per caricare anche gli help e la documentazione di ciascun plugin installato tramite pathogen basterà digitare:</div>
<div>
<div>
<br /></div>
<div>
<span style="background-color: #eeeeee; font-family: Courier New, Courier, monospace;">:Helptags</span><span style="background-color: white; font-family: inherit;"> <i>(notare la H maiuscola)</i></span></div>
</div>
<br />
<h3>
Installazione di syntastic</h3>
<br />
Per installare syntastic basterà scaricare lo zip all’indirizzo <a href="https://github.com/scrooloose/syntastic">https://github.com/scrooloose/syntastic</a> ed estrarlo nella cartella <i>syntastic</i> all’interno della cartella <i>bundle</i> creata al punto precedente. In alternativa potete anche effettuare un <i>clone</i> con git del repository presente su Github (sempre all’interno della cartella bundle).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXZAojjzNrlGKgcAt3sEwIe4-C1BeSYiDP4bTXKQ0W_CpNhnybe0SmM1CM1IsDXkq74OIsi7yY9bFCLDBdA3u8OVcTFL7eVW_P1g3cmgXbKVEUND3NnGD9eAY2failH6qASVqRjkPxnA/s1600/13+-+syntastic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXZAojjzNrlGKgcAt3sEwIe4-C1BeSYiDP4bTXKQ0W_CpNhnybe0SmM1CM1IsDXkq74OIsi7yY9bFCLDBdA3u8OVcTFL7eVW_P1g3cmgXbKVEUND3NnGD9eAY2failH6qASVqRjkPxnA/s1600/13+-+syntastic.png" height="251" width="400" /></a></div>
<br />
Una volta installato aprite Vim e digitate <span style="font-family: Courier New, Courier, monospace;">:Helptags</span> per caricare la documentazione di syntastic. In questo modo sarà possibile digitare <span style="font-family: Courier New, Courier, monospace;">:h syntastic</span> in qualunque momento per consultare l’help.<br />
<br />
<h2>
Utilizzo</h2>
<br />
Una volta installato syntastic si attiva automaticamente, supponendo che riesca a trovare un <b>checker</b> per il linguaggio che si vuole utilizzare.<br />
Come già detto, in questo articolo installeremo un checker per PHP e JavaScript, ma una volta capito il concetto è molto semplice installare un checker per altri linguaggi.<br />
<br />
<h3>
Checker per PHP</h3>
<br />
Aprite una nuova finestra del terminale con cmd e scrivete<span style="font-family: Courier New, Courier, monospace;"> <span style="background-color: #eeeeee;">php -v</span></span> sulla linea di comando.<br />
Se compare un risultato simile a quello nell’immagine seguente significa che php è già all’interno del vostro <i>PATH</i> e non dovete fare altro.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheoeyt4qU7nv61XzclZcqnf7V0kZHX0EIP62uUnl_zx7bS9hi0coxp1HLc-hrMaGFpoFqsO-vSYBS0HAzzDWBDspWXCzDnBfiEC-xMxMsgkemINvxQQjHMTaEPlmh9-eNcvSKK_veFeXA/s1600/1+-+PHP+Version.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheoeyt4qU7nv61XzclZcqnf7V0kZHX0EIP62uUnl_zx7bS9hi0coxp1HLc-hrMaGFpoFqsO-vSYBS0HAzzDWBDspWXCzDnBfiEC-xMxMsgkemINvxQQjHMTaEPlmh9-eNcvSKK_veFeXA/s1600/1+-+PHP+Version.PNG" height="201" width="400" /></a></div>
<br />
Se il comando invece non viene invece riconosciuto, sarà necessario aggiungere alla variabile di ambiente PATH il percorso in cui si trova l’interprete php. Nel mio caso, utilizzando Xampp, si trova in <i>C:\xampp\php</i>, pertanto ho dovuto aprire le proprietà di sistema e aggiungere la seguente stringa alla variabile PATH:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrvVLVHwsMijP0Y_LpTPTuAj1NjAJFimXNdnMBanf7tbhFMyCgfDcITHsHy7ZoXjUJHss0rSXnXDn5xL8JlTLW0hR58Bkwa01QlqAafKjx_ydYN-aMtVpefVAl4V4MTTxtdu1g__cbyQ/s1600/2+-+Path.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTrvVLVHwsMijP0Y_LpTPTuAj1NjAJFimXNdnMBanf7tbhFMyCgfDcITHsHy7ZoXjUJHss0rSXnXDn5xL8JlTLW0hR58Bkwa01QlqAafKjx_ydYN-aMtVpefVAl4V4MTTxtdu1g__cbyQ/s1600/2+-+Path.PNG" height="400" width="361" /></a></div>
<br />
Una volta aggiunta la variabile al PATH, riavviate il terminale e riprovate a digitare <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">php -v</span></span>. Dovrebbe comparire la versione installata di PHP.<br />
<br />
Apriamo ora un file PHP qualsiasi e digitiamo <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:SyntasticInfo</span></span> per vedere quali checker sono attualmente utilizzati:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaje5Z7Vhjww8RZU9P1t_RWw5ZhliQ_TW7Regs3ImKanqzPlW6r3Q_qz66k4dmpRDogOb41EU3YBplHB4vboRrb5aoTlBKgl-BndX28vYKgfRaLl7OcC3fzd8Y4r5VY_gq_c2ADlbCGY/s1600/3+-+SyntasticInfo.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcaje5Z7Vhjww8RZU9P1t_RWw5ZhliQ_TW7Regs3ImKanqzPlW6r3Q_qz66k4dmpRDogOb41EU3YBplHB4vboRrb5aoTlBKgl-BndX28vYKgfRaLl7OcC3fzd8Y4r5VY_gq_c2ADlbCGY/s1600/3+-+SyntasticInfo.PNG" height="318" width="400" /></a></div>
<br />
Il checker di default per PHP è <i>phpcs</i> (<a href="http://pear.php.net/package/PHP_CodeSniffer/redirected">PHP CodeSniffer di Pear</a>) che però risulta essere un po’ troppo intrusivo per i miei gusti (ad esempio segnalerà come errore il fatto che il terminatore di riga non sia <i><u>\n</u></i> ma <i>\r\n</i>). Per impostare <i>php</i> invece di phpcs come checker predefinito per i file PHP apriamo il file _vimrc e aggiungiamo la seguente linea:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_php_checkers = ['php']</span></span><br />
<br />
Ricarichiamo il file _vimrc con <span style="background-color: #eeeeee; font-family: Courier New, Courier, monospace;">:source $MYVIMRC</span> (oppure chiudendo e riaprendo Vim).<br />
<br />
Di default syntastic si attiva automaticamente ogni volta che un file viene <b>scritto su disco</b> (ad esempio quando scriviamo <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:w myfile.php</span></span>) oppure su richiesta con il comando <span style="background-color: #eeeeee; font-family: Courier New, Courier, monospace;">:SyntasticCheck</span> (da notare che il programma analizzerà comunque solo i file già salvati, non terrà conto di eventuali modifiche non ancora salvate!).<br />
<br />
Se sono presenti degli errori e il file viene salvato, syntastic evidenzierà le linee interessate e mostrerà dei tooltip con dei messaggi descrittivi. Nell’immagine successiva ho di proposito omesso una parentesi e al momento del salvataggio il programma ha sottolineato la riga interessata. Mettendo il mouse sopra la riga viene mostrato un tooltip.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnhlplg6BUKVuS14z6NmrlNa0BgnfhF_fp276HjHUSMdiTMBBZpklJwEa2qRGvaubffz4C6_0ZOR7nsvTkB6ILVRWZjuxBx82ALEI_SZ29ZOBD6FCz-yEk-T-9qDhdSdloQoc8d9y8yQ/s1600/4+-+Syntax+error.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnhlplg6BUKVuS14z6NmrlNa0BgnfhF_fp276HjHUSMdiTMBBZpklJwEa2qRGvaubffz4C6_0ZOR7nsvTkB6ILVRWZjuxBx82ALEI_SZ29ZOBD6FCz-yEk-T-9qDhdSdloQoc8d9y8yQ/s1600/4+-+Syntax+error.PNG" height="318" width="400" /></a></div>
<br />
Utilizzando il comando <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:Errors</span></span>, verrà aperta una lista contenente tutti gli errori con indicato il numero di riga e il messaggio di errore. Per chiudere la lista è sufficiente digitare il comando <span style="background-color: #eeeeee; font-family: Courier New, Courier, monospace;">:lclose</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAl-RGW4MYbIyksgcn4gjXqhrt42yy_0b2YSphvAtyIKztusTY6VLRyDY_gT_cSd24DFW_4s4e8ezm-U8O7LYWzoCoZLIDpZywnyYoCGhozHSaLJ2EtrccX0OV95GF-qCnuh42bSKZiQ/s1600/5+-+Error+list.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdAl-RGW4MYbIyksgcn4gjXqhrt42yy_0b2YSphvAtyIKztusTY6VLRyDY_gT_cSd24DFW_4s4e8ezm-U8O7LYWzoCoZLIDpZywnyYoCGhozHSaLJ2EtrccX0OV95GF-qCnuh42bSKZiQ/s1600/5+-+Error+list.PNG" height="318" width="400" /></a></div>
<br />
A questo punto non resta che correggere tutti gli errori rilevati e riprovare fino a quando non saranno stati tutti debellati :)<br />
<br />
Vediamo adesso come installare un checker i file JavaScript.<br />
<br />
<h3>
Checker per JavaScript e jQuery</h3>
<br />
Per quanto riguarda JavaScript (e jQuery naturalmente!) il procedimento sarà abbastanza simile anche se andremo a installare <b>JSHint</b> come checker.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVuU8gynRxTFhgDn2aFznHQz2SpqvfSGAzaiNVePD9umVUh6rgtg4pO4Xhb21gAa1tl5Z1s2vGPJkfv1zZqFwxd3p00BDEG3tlvbPDJp3IKR8CQsB1NtsrY-jisRbaQ6nJQueJsnk_TEs/s1600/6+-+JSHint.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVuU8gynRxTFhgDn2aFznHQz2SpqvfSGAzaiNVePD9umVUh6rgtg4pO4Xhb21gAa1tl5Z1s2vGPJkfv1zZqFwxd3p00BDEG3tlvbPDJp3IKR8CQsB1NtsrY-jisRbaQ6nJQueJsnk_TEs/s1600/6+-+JSHint.PNG" height="92" width="400" /></a></div>
<br />
Per prima cosa sarà necessario installare <b>Node.js</b>, scaricando l’installer per Windows all'indirizzo <a href="http://nodejs.org/download/">http://nodejs.org/download/</a><br />
<br />
Una volta installato apriamo la console di Node.js (troverete <i>Node.js command prompt</i> nella lista dei programmi se avete scaricato l’installer) e usiamo il package manager per installare JSHint digitando la seguente istruzione:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">npm install jshint -g</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_tG6XdFvPSYMnF84j1XkZjxOtm9pX8n9SUG7sIMhBf8Y3N6zbtbgx6fVoBomefobHmxDoOzuVLrelFMLo4-_xMH62p9QYN-KnOBF4EMJdxM18LKTBMxTYRUrIGGga4ToJop_qf7ZedWs/s1600/7+-+npm.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_tG6XdFvPSYMnF84j1XkZjxOtm9pX8n9SUG7sIMhBf8Y3N6zbtbgx6fVoBomefobHmxDoOzuVLrelFMLo4-_xMH62p9QYN-KnOBF4EMJdxM18LKTBMxTYRUrIGGga4ToJop_qf7ZedWs/s1600/7+-+npm.png" height="201" width="400" /></a></div>
<br />
Come per PHP apriamo un file JavaScript qualunque e digitiamo <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:SyntasticInfo</span></span> per vedere quali checker sono attualmente utilizzati:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNdY1yT_fGWUGzNEn0Lh8bhAolPPAcQpYJ-AHyxPKBQtx94Jurous_gKdyhM1OUHBNGZycZ_Ltkca43QcgcII0sWAELO_tRLb0XsPuVVzTFU0Cnbg9Nhtw338sLTU4V69ltdzz95q2jM/s1600/8+-+SyntasticInfo+(JS).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvNdY1yT_fGWUGzNEn0Lh8bhAolPPAcQpYJ-AHyxPKBQtx94Jurous_gKdyhM1OUHBNGZycZ_Ltkca43QcgcII0sWAELO_tRLb0XsPuVVzTFU0Cnbg9Nhtw338sLTU4V69ltdzz95q2jM/s1600/8+-+SyntasticInfo+(JS).PNG" height="318" width="400" /></a></div>
<br />
Come detto precedentemente, syntastic si attiva di default al momento del <b>salvataggio del file</b> (ad esempio quando scriviamo <span style="background-color: #eeeeee; font-family: Courier New, Courier, monospace;">:w jquery-myplugin.js</span>) oppure su richiesta con il comando <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:SyntasticCheck</span></span> (da notare che il programma analizzerà comunque solo i file già salvati, non terrà conto di eventuali modifiche non ancora salvate!).<br />
<br />
Le righe che presentano eventuali errori di sintassi, warning o semplicemente consigli sullo stile verranno sottolineate e comparirà un <i>tooltip</i> posizionando il cursore o il mouse sulla riga corrispondente.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMr3WwGMktAPNjX2P9JalK0Q8jRqrob6XbyFBEx7C7WVJpU4XjssdJ1dnoRnxj6A05jJoKlpjXERR5w9AQurznaDGzH3D1TV41q2qTQtqSvdRFF0x4QjaP5OKjGuY_XjAR_SnBPuWa3A/s1600/9+-+Syntax+error+(JS).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMr3WwGMktAPNjX2P9JalK0Q8jRqrob6XbyFBEx7C7WVJpU4XjssdJ1dnoRnxj6A05jJoKlpjXERR5w9AQurznaDGzH3D1TV41q2qTQtqSvdRFF0x4QjaP5OKjGuY_XjAR_SnBPuWa3A/s1600/9+-+Syntax+error+(JS).PNG" height="318" width="400" /></a></div>
<br />
Con il comando <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:Errors</span></span> verrà aperta una lista contenente tutti gli errori con indicato il numero di riga e il messaggio di errore.<br />
Premendo invio o anche solo facendo doppio clic su una riga si arriverà direttamente alla posizione corrispondente dell’errore.<br />
Per chiudere la lista è sufficiente digitare il comando <span style="background-color: #eeeeee; font-family: Courier New, Courier, monospace;">:lclose</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO07MN6-LB3V4fVqmZYUzIC6o7mSRVGt3tgZbcSsNMH_VsWrGWCep9CEyQyXJOuDZRyT83TeKu4ckEfH4AgsQ6iFjGQXKKuuMEP25BIFFST4IwPiu4drwiUo8mzp3Ar6TERlV14qxDwP0/s1600/10+-+Error+list+(JS).PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO07MN6-LB3V4fVqmZYUzIC6o7mSRVGt3tgZbcSsNMH_VsWrGWCep9CEyQyXJOuDZRyT83TeKu4ckEfH4AgsQ6iFjGQXKKuuMEP25BIFFST4IwPiu4drwiUo8mzp3Ar6TERlV14qxDwP0/s1600/10+-+Error+list+(JS).PNG" height="318" width="400" /></a></div>
<br />
Non resta quindi che debellare tutti gli errori, controllare e ripetere fino a quando il nostro codice non sarà pronto!<br />
<br />
<h2>
Impostare il controllo della sintassi manualmente</h2>
<br />
A volte può risultare troppo “invasivo” il fatto che il controllo della sintassi venga eseguito ad ogni salvataggio del file, ma è possibile configurare Vim per eseguirlo solamente su richiesta (ad esempio associandolo a uno <b>specifico hotkey</b>).<br />
<br />
Per prima cosa è necessario impostare syntastic in modalità passiva; in questo modo il controllo dei file sarà eseguito soltanto tramite il comando <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:SyntasticCheck</span></span>.<br />
Bisogna inoltre impostare una variabile per evitare di eseguire il controllo al salvataggio del file. Nel dettaglio le due istruzioni da aggiungere al file _vimrc sono le seguenti:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_check_on_wq = 0</span></span><br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_mode_map = { 'mode': 'passive' }</span></span><br />
<br />
Se adesso vogliamo associare il controllo a un determinato hotkey (nel mio caso F6), basta effettuare un remap aggiungendo la seguente istruzione:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">nnoremap <silent> <F6> :SyntasticCheck<CR></span></span><br />
<br />
In questo modo il controllo verrà eseguito solamente premendo il tasto F6.<br />
<br />
<h2>
Aprire automaticamente la lista degli errori</h2>
<br />
Come abbiamo visto, è necessario digitare <span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">:Errors</span></span> per far comparire la lista con tutti gli errori rilevati all’interno del file.<br />
Per fare sì che la lista venga aperta automaticamente dopo ogni controllo di sintassi basta aggiungere la seguente istruzione al file _vimrc:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_auto_loc_list = 1</span></span><br />
<br />
<h2>
Ignorare gli errori di “stile”</h2>
<br />
Molti dei checker (come ad esempio JSHint) sono in grado di distinguere 3 tipi diversi di errori:<br />
<br />
<ul>
<li><b>Errori</b><br />Gli errori veri e propri (esempio una parentesi obbligatoria mancante)</li>
<li><b>Warning</b><br />Avvertimenti che normalmente non bloccherebbero l’esecuzione del programma ma che è comunque consigliato correggere</li>
<li><b>Style</b><br />Questi sono “errori” di stile (come ad esempio le <i>best practice</i> sull’indentatura)</li>
</ul>
<br />
Alle volte si è interessati solamente agli errori e ai warning veri e propri, magari perché si usano convenzioni diverse da quelle consigliate e quindi non si vuole essere “disturbati” da eventuali messaggi non strettamente necessari (nel caso di PHP, ad esempio phpcs segnalerà come errore di stile il fatto che le linee terminano con <i>\r\n</i> di default in Windows, invece che in <i>\n</i>).<br />
<br />
Anche se spesso utili, è possibile mettere a tacere questi warning aggiungendo la seguente istruzione al file _vimrc:<br />
<br />
<span style="background-color: #eeeeee;"><span style="font-family: Courier New, Courier, monospace;">let g:syntastic_quiet_messages = { "type": "style" }</span></span><br />
<br />
In definitiva, tutte le istruzioni viste finora da aggiunge al file _vimrc per quanto riguarda syntastic sono le seguenti:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7vJWP24Ngc5apuD1yZWMFjaWqU6Jq9VGIv8WDOompFIXDlNCB6qLvK9nao7BFk5Apjz_PEdAv3ESn1nhA_NA5-pFTM-3ikgPFsVH2tqbK1cied0VaCYm70vjkw-INDHzackJego1k5Eg/s1600/12+-+vimrc.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7vJWP24Ngc5apuD1yZWMFjaWqU6Jq9VGIv8WDOompFIXDlNCB6qLvK9nao7BFk5Apjz_PEdAv3ESn1nhA_NA5-pFTM-3ikgPFsVH2tqbK1cied0VaCYm70vjkw-INDHzackJego1k5Eg/s1600/12+-+vimrc.PNG" height="76" width="400" /></a></div>
<br />
Per consultare le altre opzioni relative al plugin e per avere ulteriori informazioni sui vari checker è sufficiente leggere l’ottima documentazione fornita digitando <span style="background-color: #eeeeee; font-family: 'Courier New', Courier, monospace;">h: syntastic</span><br />
<br />
Spero che questo articolo vi possa aiutare a sviluppare codice di qualità in maniera migliore e soprattutto a trovare eventuali errori più velocemente!Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com0tag:blogger.com,1999:blog-1383762948032173671.post-74564635828977202862013-10-26T15:27:00.000+02:002013-10-26T15:27:01.182+02:00Recensione di RegexBuddyNella carriera di un ogni programmatore capita almeno una volta di doversi scontrare con un problema che richiede l’utilizzo delle <b>regular expression</b>.<br />
Personalmente amo particolarmente le regex e trovo stimolante risolvere problemi che ne richiedono l’uso, al pari della risoluzione di un buon sudoku :)<br />
<br />
Se avete cercato qualche volta un disperato aiuto su Google oppure se utilizzate le regex di frequente, vi sarà probabilmente capitato di visitare l’ottimo sito <a href="http://www.regular-expressions.info/" target="_blank">http://www.regular-expressions.info/</a> dove si possono trovare una marea di informazioni, guide ed esempi anche specifici per linguaggio di programmazione.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqmGdiNe9aMz_qn5zB9Jo6nqlMu-04mxY_lafczZkV18MkHgeXrOyPSftvIkioEy05HFJTKdJ_WgYsATLZt9A0BybqJrgqB_PbP69KYBEBxtmFhABfq_LG6A7bykBLK4P27vTjVfArPc/s1600/1+-+Sito.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqmGdiNe9aMz_qn5zB9Jo6nqlMu-04mxY_lafczZkV18MkHgeXrOyPSftvIkioEy05HFJTKdJ_WgYsATLZt9A0BybqJrgqB_PbP69KYBEBxtmFhABfq_LG6A7bykBLK4P27vTjVfArPc/s400/1+-+Sito.png" width="400" /></a></div>
<br />
Proprio dall’autore di questo sito viene il programma oggetto di questa recensione: <b>RegexBuddy</b>.<br />
Il programma è <b>a pagamento</b> e il costo per una singola licenza è di circa <b>30 €</b> (sono disponibili sconti per l’acquisto di licenze multiple).<br />
<br />
Aprendo per la prima volta il programma, l’interfaccia iniziale risulterà abbastanza complessa, ricca di funzionalità e non molto intuitiva, ma dopo qualche utilizzo comincerete a sentirvi a vostro agio.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP48rSXe8f0-wxi-AgudNLzAUNzsQZp8EdzcE_Ji40eZOo-tbl15GrH3TTZ8x93o282YmVneZHF8ud17rT_39Y3ksKTKeCAkGXYkJ1aREyE9e56sluOWfrQF4pTJrVrKsvePI9uitlLOM/s1600/2+-+Interfaccia.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP48rSXe8f0-wxi-AgudNLzAUNzsQZp8EdzcE_Ji40eZOo-tbl15GrH3TTZ8x93o282YmVneZHF8ud17rT_39Y3ksKTKeCAkGXYkJ1aREyE9e56sluOWfrQF4pTJrVrKsvePI9uitlLOM/s400/2+-+Interfaccia.png" width="400" /></a></div>
<br />
Nell’area in alto a sinistra è possibile scrivere la propria regex con un piccolo editor dotato di <b>syntax highlighting</b> e inserimento guidato dei caratteri (premendo il tasto destro del mouse).<br />
Per la creazione della regex è possibile scegliere tra <b>più di 30 “flavor”</b> diversi a seconda del linguaggio di programmazione che si sta utilizzando (es. C#, Java o Ruby) e selezionare le classiche impostazioni per le maiuscole e minuscole, il match multilinea ecc…<br />
I tasti <i>Copy</i> e <i>Paste</i> sono molto avanzati e permettono di copiare e incollare stringhe diverse a seconda della codifica del linguaggio di programmazione; selezionando ad esempio da Visual Studio la stringa <span style="font-family: Courier New, Courier, monospace;">"\\w^[0-9]{3}$"</span>, è possibile incollarla già decodificata con <i>Paste -> Paste Regex from a C# String</i> e verrà quindi inserita come <span style="font-family: Courier New, Courier, monospace;">\w^[0-9]{3}$</span>.<br />
Oltre alla funzionalità di match è chiaramente diponibile anche il <b>replace</b> per effettuare sostituzioni e lo <b>split</b> per dividere la stringa di prova in chunk.<br />
<br />
Durante la scrittura si aggiornerà in tempo reale l’area <i>Create</i> in basso, dove è possibile vedere la scomposizione in <i>token</i> di tutte le parti che compongono la regex. Il grafico è molto utile per chi è alle prime armi e sta cercando di capire cosa sta succedendo oppure in caso di espressioni particolarmente lunghe e complicate. Ogni token viene infatti <b>spiegato dettagliatamente</b> e si ha una <b>visuale gerarchica</b> che scompone la regex.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-waBO_JupDgNlD16ZqPEhEfWxMmPUv3jmm6iJqtQbkOkHeQZnOz3Z-Ubxpo7t3PRT-BevMdRVipFiBcrpGUl4UK8Ycei85oLBWKBE6Erj-UVrb-mm3kfpCOE_IlYGH70cZfcKLpXh2U/s1600/3+-+Create.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-waBO_JupDgNlD16ZqPEhEfWxMmPUv3jmm6iJqtQbkOkHeQZnOz3Z-Ubxpo7t3PRT-BevMdRVipFiBcrpGUl4UK8Ycei85oLBWKBE6Erj-UVrb-mm3kfpCOE_IlYGH70cZfcKLpXh2U/s400/3+-+Create.png" width="400" /></a></div>
<br />
Nell’area <i>Test</i> è possibile inserire il testo di prova e vedere gli eventuali match o gruppi di cattura premendo il tasto <i>List All</i>. È anche possibile inserire il testo specificando l’indirizzo di un sito web oppure utilizzare quelli della sezione <i>Library</i> (esaminata più avanti).<br />
Premendo il tasto <i>Debug</i> si aprirà la schermata di debug che permette di vedere tutti i passi che vengono eseguiti dall’interprete per effettuare il match di un’espressione regolare.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8y68O4zjk380kc23Y26fO_cN8MAstVZ0JcR2psdjA9Ag01bqTnpyYjUTKK6TmDA36TCUux6Uu2fMc-DKhxP9utG7-VLE9fI2NFb1GnkWbMDg7B_i0jwGnT6E39zgNNIqrH4X_kNz_tM8/s1600/4+-+Test.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8y68O4zjk380kc23Y26fO_cN8MAstVZ0JcR2psdjA9Ag01bqTnpyYjUTKK6TmDA36TCUux6Uu2fMc-DKhxP9utG7-VLE9fI2NFb1GnkWbMDg7B_i0jwGnT6E39zgNNIqrH4X_kNz_tM8/s400/4+-+Test.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6bKqJx62ND5EcVrWj9ua6J9lXNXOQss8rnwT3X4jDoLG9_C7eQYee37yPaupuyDjn7QI5TEH3KXCGtpxNrszQ86l4pXd-DD_cZTq-2k4tiLB3gVI63trCLlKJhPcgd7GuYXpprA6yF4/s1600/6+-+Debug.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6bKqJx62ND5EcVrWj9ua6J9lXNXOQss8rnwT3X4jDoLG9_C7eQYee37yPaupuyDjn7QI5TEH3KXCGtpxNrszQ86l4pXd-DD_cZTq-2k4tiLB3gVI63trCLlKJhPcgd7GuYXpprA6yF4/s400/6+-+Debug.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
La tab <i>Library</i> è davvero uno dei fiori all’occhiello del programma e contiene decine e decine di <b>regular expression di uso comune già pronte</b>, tutte comprensive di spiegazione e testi di prova (indirizzi e-mail, carte di credito, tag HTML ecc…). È anche possibile arricchire questa libreria inserendo le proprie regex “preferite”.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ozh1pp7gR3FqRNwfNFxL05pI6v8VWiTFRDciPpXoNo1pgboHQ1j3ESZdVlDvMavzR-M1h8Z2pYe5ofhWe_nomvCp8CB6CGu7Tdq2cZgCqLAgwSi-pIloyR7KXz4oDIPRp30L9A7EWVg/s1600/5+-+Library.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ozh1pp7gR3FqRNwfNFxL05pI6v8VWiTFRDciPpXoNo1pgboHQ1j3ESZdVlDvMavzR-M1h8Z2pYe5ofhWe_nomvCp8CB6CGu7Tdq2cZgCqLAgwSi-pIloyR7KXz4oDIPRp30L9A7EWVg/s400/5+-+Library.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit; white-space: pre-wrap;">Nella sezione <i>Use</i> è possibile <b>creare parti di codice già pronte</b> per oltre 30 linguaggi di programmazione diversi da usare per il match oppure il replace. Per convertire una regex da un linguaggio a un altro è invece possibile utilizzare la tab <i>Convert</i>.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iKvUK_cHStNjGiCjjWeTIvVOwXihn4_9kG_FqhHY3BxtXlwMUEgCIX_D8axsWn_CaeKnuRAPErSp3lzZsdV4y9nqCw6x_vqrmQ7W6CAq8uLf4BZMZhTwPSgXt3EzF2uPgMoVj32THTg/s1600/7+-+Use.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iKvUK_cHStNjGiCjjWeTIvVOwXihn4_9kG_FqhHY3BxtXlwMUEgCIX_D8axsWn_CaeKnuRAPErSp3lzZsdV4y9nqCw6x_vqrmQ7W6CAq8uLf4BZMZhTwPSgXt3EzF2uPgMoVj32THTg/s400/7+-+Use.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: inherit; white-space: pre-wrap;">Infine come bonus è incluso anche un potente strumento di ricerca simile al comando <b>grep</b> presente nelle shell Unix. Per usarlo basta selezionare la cartella in cui si vuole cercare, un’eventuale filtro sul nome e il programma cercherà (o eventualmente sostituirà) le occorrenze della nostra regex su file system.</span></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="font-family: Arial;"><span style="font-size: 15px; white-space: pre-wrap;"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg95AaP_bo1OdQ6hS1F7J6ijpVbz-UyUNdXkALqDGBi6Sr_6E0kZqdyBU2JOYxKbT__fRpDFn4uth86M6H9pgwwwEEGuI1_8JyI-xo2m2RGGR9vD8qUYouNtu9KnREoWRCOGG7vrnIOUV4/s1600/8+-+Grep.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg95AaP_bo1OdQ6hS1F7J6ijpVbz-UyUNdXkALqDGBi6Sr_6E0kZqdyBU2JOYxKbT__fRpDFn4uth86M6H9pgwwwEEGuI1_8JyI-xo2m2RGGR9vD8qUYouNtu9KnREoWRCOGG7vrnIOUV4/s400/8+-+Grep.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="white-space: pre-wrap;"><span style="font-family: inherit;">Come avrete capito dalla recensione più che positiva mi sento proprio di consigliare questo software, anche considerato il suo costo più che ragionevole.</span></span></div>
<div class="separator" style="clear: both;">
<span style="font-family: inherit; white-space: pre-wrap;"><span id="goog_127177253"></span><span id="goog_127177254"></span></span></div>
<div class="separator" style="clear: both;">
<span style="white-space: pre-wrap;"><span style="font-family: inherit;">Corredate il tutto con un <b>help offline completo</b> che attinge e integra i contenuti del sito e l’acquisto diventa automaticamente molto interessante per chi lavora con le regex 5-10 volte l’anno, quasi obbligato se invece vi imbattete spesso in questo genere di problemi.</span></span></div>
<div class="separator" style="clear: both;">
<span style="font-size: 15px; white-space: pre-wrap;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both;">
<span style="white-space: pre-wrap;"><b><span style="font-family: inherit;">Pro</span></b></span></div>
<div class="separator" style="clear: both;">
</div>
<ul>
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">Tonnellate di funzionalità interessanti</span></span></li>
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">Inserimento "guidato" di classi e caratteri</span></span></li>
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">Libreria piena di regex già pronte</span></span></li>
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">Help offline completo</span></span></li>
</ul>
<br />
<div>
<span style="white-space: pre-wrap;"><b><span style="font-family: inherit;">Contro</span></b></span></div>
<ul>
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">Ottimo prezzo</span></span></li>
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">Interfaccia un po' affollata e non molto intuitiva</span></span></li>
<li><span style="white-space: pre-wrap;"><span style="font-family: inherit;">Alcuni "freeze" (in particolare cambiando il layout delle finestre)</span></span></li>
</ul>
Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com3tag:blogger.com,1999:blog-1383762948032173671.post-5634345887552834382013-04-09T22:48:00.001+02:002013-04-09T22:52:05.443+02:00Returning an HTTP 403 Forbidden error with ASP.NET MVCSometimes it can be useful, in case of error, to return a custom error message to the user along with the <a href="http://en.wikipedia.org/wiki/HTTP_403" target="_blank">HTTP 403 (Forbidden)</a> status code.<br />
This usually indicates that the access to the requested resource is denied for some reason and the server cannot proceed. Unlike the <b>401 Unauthorized</b> status, which means an unauthorized access, correct credentials will not allow you to view the page.<br />
<br />
To handle this scenario in ASP.NET MVC we can create a <b>custom helper</b> which must meet the following conditions:<br />
<ul>
<li>It must be easy and straightforward to use</li>
<li>It must return a 403 status code along with the Forbidden status</li>
<li>It must not perform a redirect but <b>the page URL should stay the same</b></li>
<li>It must display a custom view to the user</li>
</ul>
My <i>HttpForbiddenResult</i> class inherits from the <i>HttpStatusCodeResult</i> class which already exists in ASP.NET MVC. In this way, the framework will automatically set the status code and the description. The complete code of the class is the following:<br />
<br />
<pre class="brush: csharp">
public class HttpForbiddenResult : HttpStatusCodeResult
{
public override void ExecuteResult(ControllerContext context)
{
base.ExecuteResult(context);
// creates the ViewResult adding ViewData and TempData parameters
ViewResult result = new ViewResult
{
ViewName = "AccessDenied",
ViewData = context.Controller.ViewData,
TempData = context.Controller.TempData
};
result.ExecuteResult(context);
}
// calls the base constructor with 403 status code
public HttpForbiddenResult()
: base(HttpStatusCode.Forbidden, "Forbidden")
{
}
}
</pre>
<br />
I have also created a view called <i>AccessDenied</i> within the <i>Shared</i> folder, which contains a custom message for the users who will view the page:<br />
<br />
<pre class="brush: html">@{
ViewBag.Title = "Access Denied";
}
<h2>Access Denied</h2>
<p>Sorry, the access to this page is denied.</p>
</pre>
<br />
In order to use the helper you need just the following lines of code:<br />
<br />
<pre class="brush: csharp">
public class HomeController : Controller
{
public ActionResult DoSomething(string taskName)
{
// access denied if taskName is empty
if (string.IsNullOrEmpty(taskName))
return new HttpForbiddenResult();
return View();
}
}
</pre>
<br />
If you visit the URL for the previous controller without the <i>taskName</i> parameter, you will see the following result:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5Ifdod4eaBARrLQqMA6fa6r-WTnuzy4HFfns3wN9vWUmPyUHEfI1Gkn7FZyIhmpCXd8veE_h8Wm45aVVuqsVhGRwfnnc10wQLuiyWoCudMIRXjTl-OBbowvOVzXEcpAS3z-eqd52kfk/s1600/Access+Denied.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5Ifdod4eaBARrLQqMA6fa6r-WTnuzy4HFfns3wN9vWUmPyUHEfI1Gkn7FZyIhmpCXd8veE_h8Wm45aVVuqsVhGRwfnnc10wQLuiyWoCudMIRXjTl-OBbowvOVzXEcpAS3z-eqd52kfk/s400/Access+Denied.png" width="400" /></a></div>
<br />
Of course, with little modifications you can create a custom helper for all the HTTP error codes!Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com0tag:blogger.com,1999:blog-1383762948032173671.post-23899479724453433822013-04-09T22:46:00.001+02:002013-04-09T22:51:20.673+02:00Restituire un errore HTTP 403 Forbidden con ASP.NET MVCAlle volte può essere utile, in caso di errore, restituire all'utente un messaggio personalizzato insieme al codice <a href="http://en.wikipedia.org/wiki/HTTP_403" target="_blank">HTTP 403 (Forbidden)</a>.<br />
Questo indica solitamente che l'accesso alla risorsa richiesta è vietato per qualche ragione e il server non può procedere altrimenti. Diversamente dallo stato <b>401 Unauthorized</b>, che indica un accesso non autorizzato, le credenziali non servono e non permetterebbero comunque di visualizzare la pagina.<br />
<br />
Per gestire questa situazione in ASP.NET MVC possiamo creare un <b>helper</b> personalizzato che deve soddisfare le seguenti condizioni:<br />
<ul>
<li>Deve essere facile e immediato da utilizzare</li>
<li>Deve restituire al browser il codice di errore 403 insieme allo stato Forbidden</li>
<li>Non deve effettuare un redirect ma <b>la pagina deve rimanere la stessa</b></li>
<li>Deve mostrare all'utente una view personalizzata</li>
</ul>
Ho creato la classe <i>HttpForbiddenResult</i> ereditando dalla classe <i>HttpStatusCodeResult</i> già esistente in ASP.NET MVC. In questo modo il framework si occuperà automaticamente di impostare il codice di errore e la descrizione. Il codice completo della classe è il seguente:<br />
<br />
<pre class="brush: csharp">
public class HttpForbiddenResult : HttpStatusCodeResult
{
public override void ExecuteResult(ControllerContext context)
{
base.ExecuteResult(context);
// crea il ViewResult impostando anche i parametri ViewData e TempData
ViewResult result = new ViewResult
{
ViewName = "AccessDenied",
ViewData = context.Controller.ViewData,
TempData = context.Controller.TempData
};
result.ExecuteResult(context);
}
// richiama il costruttore base con il codice 403
public HttpForbiddenResult()
: base(HttpStatusCode.Forbidden, "Forbidden")
{
}
}
</pre>
<br />
Ho creato quindi una view chiamata <i>AccessDenied </i>all'interno della cartella <i>Shared</i>, contenente un messaggio per gli utenti che visualizzeranno la pagina di errore:<br />
<br />
<pre class="brush: html">@{
ViewBag.Title = "Access Denied";
}
<h2>Access Denied</h2>
<p>Sorry, the access to this page is denied.</p>
</pre>
<br />
Per utilizzare l'helper appena creato saranno sufficienti le seguenti linee di codice:<br />
<br />
<pre class="brush: csharp">
public class HomeController : Controller
{
public ActionResult DoSomething(string taskName)
{
// accesso negato quando il parametro taskName è vuoto
if (string.IsNullOrEmpty(taskName))
return new HttpForbiddenResult();
return View();
}
}
</pre>
<br />
Andando quindi con il browser alla URL del controller precedente senza il parametro <i>taskName</i> il risultato sarà questo:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5Ifdod4eaBARrLQqMA6fa6r-WTnuzy4HFfns3wN9vWUmPyUHEfI1Gkn7FZyIhmpCXd8veE_h8Wm45aVVuqsVhGRwfnnc10wQLuiyWoCudMIRXjTl-OBbowvOVzXEcpAS3z-eqd52kfk/s1600/Access+Denied.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw5Ifdod4eaBARrLQqMA6fa6r-WTnuzy4HFfns3wN9vWUmPyUHEfI1Gkn7FZyIhmpCXd8veE_h8Wm45aVVuqsVhGRwfnnc10wQLuiyWoCudMIRXjTl-OBbowvOVzXEcpAS3z-eqd52kfk/s400/Access+Denied.png" width="400" /></a></div>
<br />
Chiaramente con le opportune modifiche è possibile realizzare un helper per tutti i codici di errore HTTP che ci interessano!Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com0tag:blogger.com,1999:blog-1383762948032173671.post-11382124118753627472013-04-02T21:48:00.000+02:002013-04-02T21:51:40.139+02:00Debugging into ASP.NET MVC 4 source code<h3>
Introduction</h3>
<div>
<br />
As you may know, ASP.NET MVC 4 it's an <b>open source</b> project and the code is freely available on <a href="http://aspnetwebstack.codeplex.com/" target="_blank">CodePlex</a>.<br />
You can download and explore it to see how they have implemented some of the classes we are interested in or just to understand a little more about the entire framework.<br />
In my case, for example, it has been very useful to see how the <i>HandleError</i> attribute is automatically serving the <i>Error</i> view in case of exception.<br />
Sometimes it could be more useful to directly enter into the source code at runtime and see which operations are performed, watch or change the values of the variables and jump from one part of the code to another.<br />
Today I will show then how to debug a web application into the source code of ASP.NET MVC 4 <b>without the need to download and compile the whole project</b> from CodePlex.<br />
In order to do this we will use the <b>SymbolSource</b> server, which publicly provides the <b>PDB symbols</b> required to perform <b>remote debugging</b> in Visual Studio.<br />
The PDB files are automatically created when the source code is compiled in <b>debug mode</b> and they contain information used to debug the code at runtime. These files are not usually included when we download the DLL files for an external library.<br />
To obtain the PDB files of an external library (ASP.NET MVC 4 in this case) there are two ways:</div>
<br />
<ul>
<li>Download and compile the source code of the library (if available)</li>
<li>Use SymbolSource and remote debugging</li>
</ul>
<br />
If you want to learn more about the PDB files you can read this <a href="http://www.wintellect.com/cs/blogs/jrobbins/archive/2009/05/11/pdb-files-what-every-developer-must-know.aspx" target="_blank">this post</a>.<br />
<br />
<h3>
Visual Studio Configuration</h3>
<div>
<br /></div>
First you need to configure Visual Studio so that it can connect to the SymbolSource server and download the PDB files.<br />
To do that, follow these steps:<br />
<br />
<ul>
<li>Go to <i>Tools -> Options -> Debugger -> General</i><i></i></li>
<li>Uncheck the option <i>Enable Just My Code (Managed Only)</i> </li>
<li>Uncheck the option <i>Enable. NET Framework source stepping</i> (this is optional)</li>
<li>Check the option <i>Enable source server support</i> </li>
<li>Uncheck the option <i>Require source files to exactly match the original version</i> </li>
</ul>
<br />
The options screen should look like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAa1snerDNJyRUiVOFgK-RvYXQjuYGWaTi6dWEqi5hXzgEyOQ45oFpqSXO1TVQnkP0xRnJaoy7rGup1p9xl3V9mQw9FaXgKSBNGpN7Y9vWs_YrYTbGdwR76dZLA76nIpIZEL1gduc-kc/s1600/Visual-Studio-Debug-Options-General.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAa1snerDNJyRUiVOFgK-RvYXQjuYGWaTi6dWEqi5hXzgEyOQ45oFpqSXO1TVQnkP0xRnJaoy7rGup1p9xl3V9mQw9FaXgKSBNGpN7Y9vWs_YrYTbGdwR76dZLA76nIpIZEL1gduc-kc/s400/Visual-Studio-Debug-Options-General.jpg" width="400" /></a></div>
<br />
Now you must <b>set the servers</b> from which to download the PDB files:<br />
<br />
<ul>
<li>Go to <i>Tools -> Options -> Debugger -> Symbols</i></li>
<li>You should see only one item: <i>Microsoft Symbol Servers</i><i></i></li>
<li>Click the exlamation mark icon to the right and add the following addresses:</li>
<ul>
<li>http://referencesource.microsoft.com/symbols</li>
<li>http://srv.symbolsource.org/pdb/Public</li>
<li>http://srv.symbolsource.org/pdb/MyGet</li>
<li>http://msdl.microsoft.com/download/symbols</li>
</ul>
<li>If needed, select a folder for the cache: in my case it is set to <i>C:\Users\Luca\AppData\Local\Temp\SymbolCache</i></li>
</ul>
<br />
The screen should look like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWPRDTX2z4w165Lk8DbOBJ93FobhZ_a-YaHt9dDgTI5OxiiR3i9FJZdeL9Q52f-TayjcQ41Mt9oG8pAWcd8ClMxhVvsEtwQ0-ClpmgdrMrW6E-_wIKfK7IRsFdF6EooyO6tmJnjOLIdc/s1600/Visual-Studio-Debug-Options-Symbols.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWPRDTX2z4w165Lk8DbOBJ93FobhZ_a-YaHt9dDgTI5OxiiR3i9FJZdeL9Q52f-TayjcQ41Mt9oG8pAWcd8ClMxhVvsEtwQ0-ClpmgdrMrW6E-_wIKfK7IRsFdF6EooyO6tmJnjOLIdc/s400/Visual-Studio-Debug-Options-Symbols.jpg" width="400" /></a></div>
<br />
<br />
Finally you need to <b>specify the DLL files you want to load</b>, otherwise Visual Studio will load all the modules and debugging becomes very slow.<br />
In this case we are only interested in ASP.NET MVC, so click on <i>Only specified modules</i>, then click on <i>Specify modules</i> and insert <i>System.Web.Mvc.dll</i>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGGmF5T-F6BFDzuJ7AzcOwpdPCteUoU2qungseGY5bIamdcFfQRBzzkbTNRYyN370MRqoGOUwfvkp2yMcFWJl2PG91TcIwiIKu5_Sg8oZZT0jhqY_C6kuptugeHzbG6dzI3md5bqQKyNw/s1600/Visual-Studio-Debug-Options-Specified-Modules.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGGmF5T-F6BFDzuJ7AzcOwpdPCteUoU2qungseGY5bIamdcFfQRBzzkbTNRYyN370MRqoGOUwfvkp2yMcFWJl2PG91TcIwiIKu5_Sg8oZZT0jhqY_C6kuptugeHzbG6dzI3md5bqQKyNw/s320/Visual-Studio-Debug-Options-Specified-Modules.jpg" width="320" /></a></div>
<br />
Press OK and exit from the options screens.<br />
Now we're almost done and we just need to open or create a new ASP.NET MVC 4 application, place a breakpoint and start debugging with <i>Debug -> Start Debugging</i>.<br />
If everything went well, in the Call Stack window you should see the ASP.NET MVC modules <b>in black</b>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMceANG9GSu1lWSCEOvZbxoL5sdo6KJDPuYF_4wKsSON84SvwxqLt0QRI88jgJtIm0HoJz2fhrEh8yjZA3qoI5kqpPOy6ARe45wsViA5DHHtiZII1Z3l_GO7xW3laSE4QqiJhNQsSVgM/s1600/Visual-Studio-Debugging-Modules.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMceANG9GSu1lWSCEOvZbxoL5sdo6KJDPuYF_4wKsSON84SvwxqLt0QRI88jgJtIm0HoJz2fhrEh8yjZA3qoI5kqpPOy6ARe45wsViA5DHHtiZII1Z3l_GO7xW3laSE4QqiJhNQsSVgM/s320/Visual-Studio-Debugging-Modules.jpg" width="320" /></a></div>
<br />
Now when you press <i>Debug -> Step Into</i> on an ASP.NET MVC statement <b>you will enter directly into the source code</b> of the framework, with a lot of comments too! <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJw813jsUY2TyBGd3XIzec6Ua89IA8o4YoAV4FIJAFPUEcO6dfTcSaKM-PMf1aeQOPmXHI85zcoquNikV0F0XlQ7lO5fILl58kKyUYu5rsx3cN2OCTaGVwYMyxbBPbCiNEshoTkIEmKII/s1600/Visual-Studio-Debug-Options-Step-Into.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJw813jsUY2TyBGd3XIzec6Ua89IA8o4YoAV4FIJAFPUEcO6dfTcSaKM-PMf1aeQOPmXHI85zcoquNikV0F0XlQ7lO5fILl58kKyUYu5rsx3cN2OCTaGVwYMyxbBPbCiNEshoTkIEmKII/s400/Visual-Studio-Debug-Options-Step-Into.jpg" width="400" /></a></div>
<br />
<h3>
Help me! It doesn't work!</h3>
<br />
If the modules in the <i>Call Stack</i> window are still appearing in gray and you can't enter into the source code of the framework, you can try the following solutions:<br />
<br />
Make sure you followed all the steps and you have checked all the required options. In particular, make sure that you have removed the check from <i>Require source files to exactly match the original version</i> and entered all the SymbolSource addresses in the right order.<br />
<br />
Try uninstalling and reinstalling the ASP.NET MVC 4 <b>NuGet package</b> (you don't have to reinstall the program, just the package!).<br />
<br />
If you still cannot run the debugger, there is a final solution that worked fine for me.<br />
<br />
It appears that in some cases the DLL files in the <i>GAC (Global Assembly Cache)</i> prevent Visual Studio from loading the PDB files from the remote server.<br />
<br />
Reinstalling ASP.NET MVC did not help in my case (I just lost a lot of time) but I solved this problem in the following way:<br />
<br />
<ul>
<li>Go to <i>C:\Windows\Microsoft.NET\assembly\GAC_MSIL</i></li>
<li>Find the folder called System.Web.Mvc</li>
<li>Rename it, for example _System.Web.Mvc</li>
</ul>
<br />
In this way, the DLL files for ASP.NET MVC will not be searched in the GAC allowing you to connect to the SymbolSource server and download the PDB files.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9FPpBrsNC9ko0Uu8WZ-jx-Rn8Y5m_7KfI5u1XoEsM6IQFUS5XrjlJdlWYe-kLYmOcUMptr1NPE8JoawU7BrTciWT9i8E_xcmW5bY9Xu3ycK0sZXqSqnsCteGqm5LoFe8RsK17MK0_5c/s1600/Rename-System-Web-Mvc.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9FPpBrsNC9ko0Uu8WZ-jx-Rn8Y5m_7KfI5u1XoEsM6IQFUS5XrjlJdlWYe-kLYmOcUMptr1NPE8JoawU7BrTciWT9i8E_xcmW5bY9Xu3ycK0sZXqSqnsCteGqm5LoFe8RsK17MK0_5c/s400/Rename-System-Web-Mvc.jpg" width="400" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com14tag:blogger.com,1999:blog-1383762948032173671.post-24619725954586188192013-04-02T21:40:00.000+02:002013-04-02T22:20:02.526+02:00Welcome to my blog<span class="" id="result_box" lang="en"><span class="hps">Welcome to my </span><span class="hps">blog dedicated to</span> <span class="hps">two of my</span> <span class="hps">favorite</span> <span class="hps">passions</span>: <b>programming</b> <span class="hps">and <b>cooking</b>.</span><br /><br /><span class="hps">I</span><span class="hps">t's a</span> <span class="hps">rather strange</span> <span class="hps">combination</span> <span class="hps">and</span> <span class="hps">it will not be</span> <span class="hps">easy to write </span><span class="hps">quality content</span> <span class="hps">for both categories.</span><br /><br /><span class="hps">The </span><span class="hps">recipes</span> won't be complex <span class="hps">but</span> <span class="hps">fairly</span> <span class="hps">quick and easy to</span> <span class="hps">make!</span> <span class="hps">The other posts</span> <span class="hps">will span from</span> .NET programming <span class="hps">to</span> <span class="hps">Ruby</span> <span class="hps">on Rails</span><span class="">, from Windows to</span> <span class="hps">Xubuntu.</span><br /><br /><span class="hps">About me</span><span class="">, I'm a</span> <span class="hps">web programmer</span> <span class="hps">with a big passion</span> <span class="hps">for computing.</span> <span class="hps">I am currently working</span> <span class="hps">in</span> <span class="hps">a company</span> <span class="hps">as a .NET developer </span><span class="hps">but in</span> <span class="hps">my free time I</span> <span class="hps">like to explore</span> <span class="hps">new programming languages and technologies</span>.<br /><br /><span class="hps">Let's begin</span> <span class="hps">this little adventure</span>!</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrLfn-iT3-vD8ZO44bMdnOnxXfCE3QLzGXkCDuRj7J3w2vZPJhh7-mZxtKXoNRxn3qA90RDSeEQ1j3cW-zG9QYzZhkuewtIEsgUo5xku1mYuQKAV53373XBxOxWb3r6aslmh1jxQ_Qpo/s1600/keyboard.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrLfn-iT3-vD8ZO44bMdnOnxXfCE3QLzGXkCDuRj7J3w2vZPJhh7-mZxtKXoNRxn3qA90RDSeEQ1j3cW-zG9QYzZhkuewtIEsgUo5xku1mYuQKAV53373XBxOxWb3r6aslmh1jxQ_Qpo/s200/keyboard.jpg" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHflRYhQ7zPSnblF4yatXKWOeYcqRIcyn1h37sQxtAYwzzJstPCsCJ14kH7aAuR3acHC-YxqZWu-zYoYn3A9WNKjDO9g6r-2HiDRMip6B6DhFaZgf3DY1YPWAegmm_mBbLJhJMMzUuvk/s1600/cucina.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHflRYhQ7zPSnblF4yatXKWOeYcqRIcyn1h37sQxtAYwzzJstPCsCJ14kH7aAuR3acHC-YxqZWu-zYoYn3A9WNKjDO9g6r-2HiDRMip6B6DhFaZgf3DY1YPWAegmm_mBbLJhJMMzUuvk/s200/cucina.jpg" width="200" /></a></div>
Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com0tag:blogger.com,1999:blog-1383762948032173671.post-62997462407359137142013-04-02T20:21:00.002+02:002013-04-02T21:51:40.142+02:00Hello English World!Poichè il mondo dell'informatica è prevalentemente orientato alla lingua inglese, ho deciso di tradurre i post inseriti fino a oggi, aggiungendo d'ora in avanti la traduzione per ogni articolo che inserirò.<br />
<br />
Happy reading :)Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com0tag:blogger.com,1999:blog-1383762948032173671.post-69376879939565904722013-02-03T14:06:00.000+01:002013-04-02T20:23:31.567+02:00Modenautobus: l'applicazione che aiuta a spostarsi a Modena<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFExa5pHKTKOAbiznuRgo1v6GfywjcWx_LagB_y7s5H096pIFwYokJY1sbv35pjGt_OMlQg1BYdpJRgVoHbBmRd4tiLOxmRLQIMizvj4U245Q_XruAhIdStwS5g1mx8T144F8a7XMtoDE/s1600/Modenautobus-Mobile.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFExa5pHKTKOAbiznuRgo1v6GfywjcWx_LagB_y7s5H096pIFwYokJY1sbv35pjGt_OMlQg1BYdpJRgVoHbBmRd4tiLOxmRLQIMizvj4U245Q_XruAhIdStwS5g1mx8T144F8a7XMtoDE/s200/Modenautobus-Mobile.png" width="139" /></a></div>
È con piacere che annuncio l'uscita della prima versione di <b>Modenautobus</b>, un'applicazione web gratuita che permette di consultare in maniera facile e veloce <b>gli orari degli autobus urbani di Modena</b>.<br />
L'applicazione è nata con l'esigenza di trovare e visualizzare comodamente le corse degli autobus anche quando si è fuori casa e si hanno a disposizione solo un tablet o un cellulare. La consultazione è semplificata rispetto alle più complesse tabelle presenti sul sito della <a href="http://www.setaweb.it/" target="_blank">SETA</a>.<br />
Per quanto riguarda i dettagli tecnici, l'applicazione è realizzata in <i>ASP.NET MVC 4</i> con <i>jQuery Mobile</i> e <i>Knockout JS</i> come librerie per la parte client. Per ora l'applicazione è esclusivamente in versione web, ma prossimamente potrebbe essere inserita nei vari store con l'utilizzo di <i>PhoneGap</i>.<br />
Chiaramente l'applicazione è in uno stadio iniziale e potrà essere ampliata e migliorata sulla base delle esigenze e dei feedback degli utenti che vorranno utilizzarla.<br />
Per maggiori informazioni potete consultare il sito ufficiale <a href="http://modenautobus.info/">www.modenautobus.it</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWlwIWQSv7WVn_2yD3SdUFYsn37cb081E8-o1q4rZAUHQgYh0Va8EuEbGRnPHJErgI-krJGpJzjSe9U2pzLYksOc2epb9I7rHhDZZdmiIbc_UaaN4R1UxhNxTePcBSgwbnXm24YBqjHlc/s1600/Modenautobus-Mobile-Risultati.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWlwIWQSv7WVn_2yD3SdUFYsn37cb081E8-o1q4rZAUHQgYh0Va8EuEbGRnPHJErgI-krJGpJzjSe9U2pzLYksOc2epb9I7rHhDZZdmiIbc_UaaN4R1UxhNxTePcBSgwbnXm24YBqjHlc/s400/Modenautobus-Mobile-Risultati.png" width="400" /></a></div>
Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com0tag:blogger.com,1999:blog-1383762948032173671.post-537515241825331632013-01-31T13:07:00.000+01:002013-04-02T21:51:15.742+02:00Debug nel codice sorgente di ASP.NET MVC 4<h3>
Introduzione</h3>
<div>
<br /></div>
Come molti di voi sapranno, ASP.NET MVC 4 è <b>open source</b> e il suo codice sorgente è liberamente disponibile su <a href="http://aspnetwebstack.codeplex.com/" target="_blank">CodePlex</a>.<br />
Scaricarlo e analizzarlo e può risultare indubbiamente utile per guardare come sono state implementate alcune delle classi che ci interessano o anche solo per capire qualcosa di più sulla struttura del framework.<br />
Nel mio caso, ad esempio, è risultato molto utile osservare direttamente il codice per vedere come l’attributo <i>HandleError</i> restituisse automaticamente la view <i>Error</i> in caso di errore.<br />
Alle volte però potrebbe risultare ancora più utile entrare direttamente nel sorgente a <i>runtime</i> per vedere quali operazioni vengono eseguite, guardare o modificare i valori delle variabili e saltare da una parte all’altra del codice.<br />
Oggi vi mostrerò quindi come effettuare il debug di un’applicazione web all’interno del codice sorgente di ASP.NET MVC 4 <b>senza bisogno di scaricare e compilare tutto il progetto</b> da CodePlex.<br />
Per fare questo utilizzeremo i server di <b>SymbolSource</b> che mette a disposizione pubblicamente i <b>simboli PDB</b> per effettuare il <b>debug remoto</b> con Visual Studio.<br />
I file PDB vengono creati automaticamente quando il codice viene compilato in modalità <i>debug</i> e contengono proprio le informazioni necessarie per effettuare il debug del codice a runtime. Solitamente questi file non vengono inclusi quando scarichiamo le DLL di una libreria esterna; quindi per avere i file PDB di una libreria esterna (in questo caso ASP.NET MVC 4) esistono due modi:<br />
<br />
<ul>
<li>Scaricare e compilare il codice sorgente della libreria (se disponibile)</li>
<li>Utilizzare SymbolSource</li>
</ul>
<br />
Se volete saperne di più sui file PDB potete leggere <a href="http://www.wintellect.com/cs/blogs/jrobbins/archive/2009/05/11/pdb-files-what-every-developer-must-know.aspx" target="_blank">questo post</a>.<br />
<br />
<h3>
Configurazione di Visual Studio</h3>
<div>
<br /></div>
Per cominciare è necessario configurare Visual Studio affinchè possa collegarsi al server da cui scaricare i file PDB.<br />
Per farlo bisogna seguire i seguenti passi:<br />
<br />
<ul>
<li>Andare in <i>Tools -> Options -> Debugger -> General</i></li>
<li>Togliere la spunta da <i>Enable Just My Code (Managed Only)</i></li>
<li>Togliere la spunta (se presente) da <i>Enable .NET Framework source stepping</i></li>
<li>Mettere la spunta a <i>Enable source server support</i></li>
<li>Togliere la spunta da <i>Require source files to exactly match the original version</i></li>
</ul>
<br />
La schermata delle opzioni dovrebbe apparire così:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAa1snerDNJyRUiVOFgK-RvYXQjuYGWaTi6dWEqi5hXzgEyOQ45oFpqSXO1TVQnkP0xRnJaoy7rGup1p9xl3V9mQw9FaXgKSBNGpN7Y9vWs_YrYTbGdwR76dZLA76nIpIZEL1gduc-kc/s1600/Visual-Studio-Debug-Options-General.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAa1snerDNJyRUiVOFgK-RvYXQjuYGWaTi6dWEqi5hXzgEyOQ45oFpqSXO1TVQnkP0xRnJaoy7rGup1p9xl3V9mQw9FaXgKSBNGpN7Y9vWs_YrYTbGdwR76dZLA76nIpIZEL1gduc-kc/s400/Visual-Studio-Debug-Options-General.jpg" width="400" /></a></div>
<br />
Adesso è necessario <b>impostare i server</b> da cui scaricare i file PDB:<br />
<br />
<ul>
<li>Andare in <i>Tools -> Options -> Debugger -> Symbols</i></li>
<li>Al momento dovrebbe essere presente solo la voce <i>Microsoft Symbol Servers</i></li>
<li>Fare clic sull’icona con a destra del punto esclamativo per aggiungere i seguenti indirizzi:</li>
<ul>
<li>http://referencesource.microsoft.com/symbols</li>
<li>http://srv.symbolsource.org/pdb/Public</li>
<li>http://srv.symbolsource.org/pdb/MyGet</li>
<li>http://msdl.microsoft.com/download/symbols</li>
</ul>
<li>Se non presente, selezionare una cartella per la cache: nel mio caso è impostata su <i>C:\Users\Luca\AppData\Local\Temp\SymbolCache</i></li>
</ul>
<br />
La schermata dovrebbe apparire più o meno così:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWPRDTX2z4w165Lk8DbOBJ93FobhZ_a-YaHt9dDgTI5OxiiR3i9FJZdeL9Q52f-TayjcQ41Mt9oG8pAWcd8ClMxhVvsEtwQ0-ClpmgdrMrW6E-_wIKfK7IRsFdF6EooyO6tmJnjOLIdc/s1600/Visual-Studio-Debug-Options-Symbols.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWPRDTX2z4w165Lk8DbOBJ93FobhZ_a-YaHt9dDgTI5OxiiR3i9FJZdeL9Q52f-TayjcQ41Mt9oG8pAWcd8ClMxhVvsEtwQ0-ClpmgdrMrW6E-_wIKfK7IRsFdF6EooyO6tmJnjOLIdc/s400/Visual-Studio-Debug-Options-Symbols.jpg" width="400" /></a></div>
<br />
Per ultima cosa è necessario <b>specificare le DLL che si vogliono caricare</b>, altrimenti verranno caricati tutti i moduli e il debug diventerà lentissimo.<br />
In questo caso siamo interessati soltanto al debug di ASP.NET MVC, perciò spuntiamo l’opzione <i>Only specified modules</i>, facciamo clic su <i>Specify modules</i> e inseriamo <i>System.Web.Mvc.dll</i>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGGmF5T-F6BFDzuJ7AzcOwpdPCteUoU2qungseGY5bIamdcFfQRBzzkbTNRYyN370MRqoGOUwfvkp2yMcFWJl2PG91TcIwiIKu5_Sg8oZZT0jhqY_C6kuptugeHzbG6dzI3md5bqQKyNw/s1600/Visual-Studio-Debug-Options-Specified-Modules.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGGmF5T-F6BFDzuJ7AzcOwpdPCteUoU2qungseGY5bIamdcFfQRBzzkbTNRYyN370MRqoGOUwfvkp2yMcFWJl2PG91TcIwiIKu5_Sg8oZZT0jhqY_C6kuptugeHzbG6dzI3md5bqQKyNw/s320/Visual-Studio-Debug-Options-Specified-Modules.jpg" width="320" /></a></div>
<br />
Premiamo OK e usciamo dalle opzioni.<br />
A questo punto abbiamo quasi finito e non ci resta che aprire o creare un’applicazione ASP.NET MVC 4, posizionare un breakpoint e avviare il debug con <i>Debug -> Start Debugging</i>.<br />
Se tutto quanto è andato per il meglio, nella finestra <i>Call Stack</i> dovreste vedere i moduli di ASP.NET MVC caricati (<b>in nero</b> e non in grigio chiaro):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMceANG9GSu1lWSCEOvZbxoL5sdo6KJDPuYF_4wKsSON84SvwxqLt0QRI88jgJtIm0HoJz2fhrEh8yjZA3qoI5kqpPOy6ARe45wsViA5DHHtiZII1Z3l_GO7xW3laSE4QqiJhNQsSVgM/s1600/Visual-Studio-Debugging-Modules.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMceANG9GSu1lWSCEOvZbxoL5sdo6KJDPuYF_4wKsSON84SvwxqLt0QRI88jgJtIm0HoJz2fhrEh8yjZA3qoI5kqpPOy6ARe45wsViA5DHHtiZII1Z3l_GO7xW3laSE4QqiJhNQsSVgM/s320/Visual-Studio-Debugging-Modules.jpg" width="320" /></a></div>
<br />
Adesso andando in <i>Debug -> Step Into</i> su un’istruzione di ASP.NET MVC <b>entreremo direttamente nel codice sorgente</b> del framework, con tanto di commenti al codice!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJw813jsUY2TyBGd3XIzec6Ua89IA8o4YoAV4FIJAFPUEcO6dfTcSaKM-PMf1aeQOPmXHI85zcoquNikV0F0XlQ7lO5fILl58kKyUYu5rsx3cN2OCTaGVwYMyxbBPbCiNEshoTkIEmKII/s1600/Visual-Studio-Debug-Options-Step-Into.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJw813jsUY2TyBGd3XIzec6Ua89IA8o4YoAV4FIJAFPUEcO6dfTcSaKM-PMf1aeQOPmXHI85zcoquNikV0F0XlQ7lO5fILl58kKyUYu5rsx3cN2OCTaGVwYMyxbBPbCiNEshoTkIEmKII/s400/Visual-Studio-Debug-Options-Step-Into.jpg" width="400" /></a></div>
<br />
<h3>
Aiuto, non funziona!</h3>
<br />
Se per caso durante il debug i moduli appaiono ancora in grigio chiaro e non riuscite a entrare nel sorgente del framework, potete provare diverse soluzioni:<br />
<br />
Controllate di aver eseguito tutti i passaggi e di aver spuntato tutte le suddette opzioni. In particolare controllate di aver tolto la spunta a <i>Require source files to exactly match the original version</i> e di aver inserito gli indirizzi di SymbolSource nell’ordine giusto.<br />
<br />
Provate a disinstallare e reinstallare <b>con NuGet</b> il package di ASP.NET MVC 4 (mi raccomando, non dovete disinstallare il programma!).<br />
<br />
Se ancora non riuscite a far funzionare il debugger, c’è un ultima soluzione che ha funzionato egregiamente su uno dei miei computer.<br />
Sembra infatti che in alcuni casi le DLL presenti nella <i>GAC (Global Assembly Cache)</i> impediscano a Visual Studio di caricare i PDB dal server remoto di SymbolSource.<br />
Reinstallare completamente ASP.NET MVC purtroppo <b>non è servito</b> nel mio caso (ho solo perso molto tempo) ma ho risolto nel seguente modo:<br />
<br />
<ul>
<li>Andare in <i>C:\Windows\Microsoft.NET\assembly\GAC_MSIL</i></li>
<li>Trovare la cartella System.Web.Mvc</li>
<li>Rinominarla con un altro nome, ad esempio _System.Web.Mvc</li>
</ul>
<br />
In questo modo la DLL non verrà cercata nella GAC permettendovi di collegarvi al server di SymbolSource per scaricare i file PDB.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9FPpBrsNC9ko0Uu8WZ-jx-Rn8Y5m_7KfI5u1XoEsM6IQFUS5XrjlJdlWYe-kLYmOcUMptr1NPE8JoawU7BrTciWT9i8E_xcmW5bY9Xu3ycK0sZXqSqnsCteGqm5LoFe8RsK17MK0_5c/s1600/Rename-System-Web-Mvc.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9FPpBrsNC9ko0Uu8WZ-jx-Rn8Y5m_7KfI5u1XoEsM6IQFUS5XrjlJdlWYe-kLYmOcUMptr1NPE8JoawU7BrTciWT9i8E_xcmW5bY9Xu3ycK0sZXqSqnsCteGqm5LoFe8RsK17MK0_5c/s400/Rename-System-Web-Mvc.jpg" width="400" /></a></div>
<br />Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com1tag:blogger.com,1999:blog-1383762948032173671.post-6673777097534299982013-01-31T13:03:00.000+01:002013-04-02T20:31:39.878+02:00Benvenuti nel mio blogBenvenuti in questo blog dedicato a due delle mie passioni preferite: la <b>programmazione</b> e la <b>cucina</b>.<br />
<br />
In effetti è un abbinamento alquanto strano e non sarà facile cercare di inserire contenuti di qualità per entrambi.<br />
<br />
Diciamo che non pubblicherò ricette molto sofisticate ma saranno abbastanza facili e veloci da realizzare! I post di informatica invece spazieranno dalla programmazione .NET a Ruby on Rails, da Windows a Xubuntu.<br />
<br />
Per quanto riguarda me, sono un programmatore web con una grande passione per l'informatica. Attualmente lavoro in un'azienda come sviluppatore .NET ma nel tempo libero mi piace esplorare sempre nuovi linguaggi e tecnologie.<br />
<br />
Diamo inizio a questa piccola avventura!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrLfn-iT3-vD8ZO44bMdnOnxXfCE3QLzGXkCDuRj7J3w2vZPJhh7-mZxtKXoNRxn3qA90RDSeEQ1j3cW-zG9QYzZhkuewtIEsgUo5xku1mYuQKAV53373XBxOxWb3r6aslmh1jxQ_Qpo/s1600/keyboard.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrLfn-iT3-vD8ZO44bMdnOnxXfCE3QLzGXkCDuRj7J3w2vZPJhh7-mZxtKXoNRxn3qA90RDSeEQ1j3cW-zG9QYzZhkuewtIEsgUo5xku1mYuQKAV53373XBxOxWb3r6aslmh1jxQ_Qpo/s200/keyboard.jpg" width="200" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHflRYhQ7zPSnblF4yatXKWOeYcqRIcyn1h37sQxtAYwzzJstPCsCJ14kH7aAuR3acHC-YxqZWu-zYoYn3A9WNKjDO9g6r-2HiDRMip6B6DhFaZgf3DY1YPWAegmm_mBbLJhJMMzUuvk/s1600/cucina.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHflRYhQ7zPSnblF4yatXKWOeYcqRIcyn1h37sQxtAYwzzJstPCsCJ14kH7aAuR3acHC-YxqZWu-zYoYn3A9WNKjDO9g6r-2HiDRMip6B6DhFaZgf3DY1YPWAegmm_mBbLJhJMMzUuvk/s200/cucina.jpg" width="200" /></a></div>
Anonymoushttp://www.blogger.com/profile/15739566485049712057noreply@blogger.com0