alvinashcraft
shared this story
from 
Adobe Blogs.
Dreamweaver CC 2017 is packed full with coding tools that can enhance your productivity, and speed up the processing of developing websites.
Here are some tips that you can use to code efficiently and without errors in Dreamweaver.
Declutter your workspace
If you are coding using the Standard workspace offered by Dreamweaver, switch to the Developer workspace using Workspace Switcher.
You are immediately presented with a minimal interface that allows you to get on with the job of coding without any unnecessary distractions.
The distraction-free Developer workspace
If you are working in code, the only real panels you need are the Snippets and Files panels both of which are available in the Developer workspace, by default.
To preview your code changes in real -time as you code, just click Real-Time Preview on the status bar. If you have a dual monitor setup, then you can move the browser to the second monitor and code and preview without any awkward window switching.
Previewing your code changes in real time
Note: The Developer workspace gets even more distraction-free on Mac operating systems with the full-screen option. Try it out.
Save and reuse code snippets
Stop rewriting code and doing manual copy and paste. Instead, save the code as a snippet. You can then simply double-click a snippet from the Snippets panel, and the code is inserted in your file at the cursor location.
You can turbo-charge this task even more, by assigning a trigger key to the snippet. Once you do that, you don’t even need to navigate to the Snippets panel any more. Simply type in the trigger key text and press Tab, and your saved snippet is inserted at the cursor location.
For more information on how you can use snippets in your coding workflow, see Reuse code with snippets.
Use Emmet shortcuts
Emmet is an open-source tool that is plugged into Dreamweaver, and it provides shortcuts that you can use to expand code, without having to manually type out multiple lines.
You can use Emmet to generate both HTML and CSS code.
Here is a favorite Emmet shortcut that generates code for that most mundane of tasks – creating an unordered list.
ul>li*5
Type the above shortcut in Dreamweaver, change the numeral 5 to the number of list items that you want. Press Tab and see what happens.
Your one short line of text gets converted into this:
This is just one example. Just google the web to learn how other web developers are coding using Emmet. For a start, check out this cheat sheet. Print it out, keep it at your desk, and try them out. You will never code the old way again.
Use multiple cursors
Do several things at once using Dreamweaver’s multiple cursors. What this means is you can put a cursor in multiple locations in your file and edit different lines all at once.
Quickly invoke multiple cursors in one of the following ways:
Add cursors to multiple continuous lines – Hold down the Alt key, then click drag vertically.
Add cursors in multiple discontinuous lines – Press the Ctrl key, and click the different lines where you want to place the cursor.
Select text in multiple continuous lines – Press the Alt key and drag diagonally.
Select text in multiple discontinuous lines – Select some text, then press the Ctrl key (Windows), or the Cmd key (Mac), and continue to make further selections.
Once you have your cursors in place, just type in your changes, and see the changes reflected in multiple places.
For more information on using multiple cursors, see Use multiple cursors to add or change text in multiple places.
Use Dreamweaver’s code linting features to check your code
Dreamweaver makes debugging code for common errors simple and easy with the help of linting. Linting is the process of analyzing code to flag potential errors or suspicious usage of code. HTML syntax errors, parsing errors in CSS, or warnings in JavaScript files are some of the things flagged by Dreamweaver.
To use Dreamweaver’s linting features, enable linting in Edit > Preferences, and set linting rules. That’s all you need to do.
Dreamweaver displays the linting results in the Output panel using simple icons that flag your coding errors. Simply click on the error in the Output panel and you are taken to the offending line to correct the mistake.
Dreamweaver’s output panel
So, these are some of the simple coding productivity hacks in Dreamweaver.
Which of these features do you use? What other features do you use to make coding websites easier?
