WebStorm

  • CSS 类名的单词连字符:下划线还是横杠?

    本文的部分内容整理自我对此问题的解答: 命名 CSS 的类或 ID 时单词间如何连接? - 知乎

    问题

    CSS 类或 ID 命名时单词间连接通常有这几种写法:

    • 驼峰式: solutionTitlesolutionDetail
    • 用横杠连接: solution-titlesolution-detail
    • 下划线连接: solution_titlesolution_detail

    应该采用哪种写法呢?选择的时候是出于个人习惯还是有别的考虑?

    看了下豆瓣,美团,淘宝的源码,都是采用 solution_title 的写法。

    我的回答

    首先定个性,

  • WebStorm,你一直在寻找的前端开发 IDE

    人生苦短,用 IDE 吧。

    • 我不是屌丝,也不是高富帅,我是一个正常的普通人。

    • 我成家了,我有自己的小日子,我想过更好的生活,我的时间很宝贵。

    • 我是一个前端工程师,大多数时候我靠写代码挣钱,最终,我决定用 IDE 来干活。

    • 我觉得你——我的战友——时间同样很宝贵,所以我推荐你用 WebStorm。

    WebStorm Logo

    简介

    WebStorm 是一款前端开发 IDE(集成开发环境),可以简单理解为,它是一个智能的、强大的代码编辑器。

    语法着色、代码补全、代码分析、代码导航、格式化、快捷键、就地参考文档、实时纠错提示、代码重构、脚本调试、版本控

  • 在新的项目里,我已经开始全面使用 Babel 与 SASS 了。本来 WebStorm 里自带 File Watcher 功能,但我认为项目本身应该尽可能的脱离编辑器环境,这样每个人都可以使用通用的方法进行开发,所以自己写了一个 gulp 任务:lmk123/gulp-es6-sass。

    然而,我现在决定使用 WebStorm 里的 File Watcher 了,原因如下:

    • 每次开始开发之前,都要启动一个 gulp watcher 任务太繁琐了
    • 编译之后的文件不能立刻同步进 WebStorm,这导致刷新网页后,加载的仍然是旧文件
    • 将编译步骤加入 gulp 流程会使得 gulpfile.js
  • WebStorm 很早就支持了 *.scss*.less 文件的语法高亮,但偶尔我们会需要在 HTML 文件的 <style> 标签内写 SCSS 或 Less 的语法(例如使用 Vue.js 的朋友应该会需要在 *.vue 文件的 <style> 标签内写 SCSS),其实 WebStorm 也是支持的,但是官方文档上好像并没有提及。

    WebStorm 2019.1 及之后的版本

    <style> 上加 lang="scss"lang="sass"lang="less" 就可以分别支持 SCSS、Sass 和 Less 的语法了。

    WebS

  • 自大学以来,我换了不少编辑器。一开始学习 C# 的时候,用的是 Visual Studio,这款编辑器确实非常好用,即使是用来写 JavaScript 也有很全的代码提示。

    后来我决定专攻前端开发,这时候 Visual Studio 就显得太过于笨重了。在学校老师的建议下,我开始用 Dreamweaver,老师极力推荐它的原因是它的「所见即所得」特性——不需要自己写代码,只需要拖一些控件进去,它就会自动帮你生成页面……可是它生成的代码太差劲了,我从来没拖过控件,它的代码提示也不如 Visual Studio 全面,时不时的还会卡顿。

    再后来,我在网友的推荐下开始用 WebStorm,简直爱不释