prettier

环境： VSCode 1.33.1 Node.js 8.9.1 一、ESLint 1、介绍 ESLint 是最流行的 JavaScript Linter 。 Linter 是检查代码风格/错误的小工具。其他类似的 Linter 工具还有：TSLint、stylelint。 它包含三个功能： （1）check syntax （2）find problems 前两个可以统称为 Code-quality rules，例如 no-unused-vars 规则。 （3）enforce code style 最后一个可以称为 Formatting rules ，例如 keyword-spacing 规则。 下面介绍的 Prettier 就只有这一个 Formatting rules 功能。 2、安装 npm install -g eslint 建议全局安装。 3、使用 (1) 生成配置文件 下面的命令，可以在项目的根目录创建 .eslintrc.js 配置文件。 eslint --init 按照交互提示，依次选择进行： (2) 校验文件 eslint yourfile.js # 命令行会返回出现 problems 的数量和相应行数。 eslint --fix yourfile.js # 直接修改文件 (3) 修改配置文件 一个简单的 .eslintrc.js 文件： module

多人参与项目开发的时候，经常会遇到代码格式化不一致，在提交的时候出现很多冲突的情况。其中换行符冲突就是一种，在不同的系统平台上是不一样的。UNIX/Linux 使用的是 0x0A（LF），早期的 Mac OS 使用的是 0x0D（CR），后来的 OS X 在更换内核后与 UNIX 保持一致了。但 DOS/Windows 一直使用 0x0D0A（CRLF） 作为换行符。所以会出现使用mac的开发者修改的代码中是lf换行，windows用户使用的crlf换行符，总是互相影响。还有一个原因是，git默认配置了autocrlf为true，也就是说默认所有代码都会被提交成了crlf，但是如果不同开发者自己配置的autocrlf配置不一致（比如，input或者false），就会出现总是互相覆盖的情况。以下是解决换行符冲突的解决方案： 1、编辑器统一 a. 修改git全局配置，禁止git自动将lf转换成crlf, 命令： git config --global core.autocrlf false b. 修改编辑器的用户配置，例如vscode " files.eol " : " \n " , // 文件换行使用lf方式 2、 git方式统一 git提交的时候，文件中的换行符必须是LF，如果不是不能提交。 # 提交时转换为LF，检出时不转换 git config -- global core

VS Code写Vue，每次按照eslint格式手动fix代码很烦，Alt+Shift+f格式化代码又会和prettier冲突，因此找了Ctrl+s保存代码，自动按照eslint风格格式化代码。 网上大多是早前修改方法，现在已经不适用，因此写这个随笔，避坑。 当前版本使用方式， 使用编辑器提供的 Code Actions On Save ，也就是说VS Code提供了用户保存文档时添加自定义操作的接口。位置如下： 然后，将json中 editor.codeActionsOnSave 的值改为 { "source.fixAll.eslint": true } 即可。如下： 搞定！ 注意，以下这种方式已经 弃用 ： 来源： oschina 链接： https://my.oschina.net/u/4381446/blog/4260685

我们一起来喜欢TypeScript 现在写js不用TypeScript，伦家可能会觉得你是外星人。 是的，TypeScript很大程度增强了代码的可读性，可跟踪性，可维护性和减少了bug。 那么没有理由不适用TypeScript进行js开发，但是回归本质，要根据实际出发，不是盲目的一来直接上TS。 我参与过一些使用TS开发的项目，也发现使用TS出现的问题。 举点例子： 无处不见的any 无视TS 高版本的express已经内置TS, 实际上到处还是any。 app.get("/", function(req: any, res: any) { res.send("Hello," + data.name); }); 本身一个函数能写完的代码，却写一个class来完成 tslint编译一堆错误，依旧无视 这条倒是其次， 因为很多时候，也许你没有那么多时间去处理这些问题。也说明我们在工程化下的功夫不足。 node和typescript node + typescript 入门级别的配置真的特别简单。 npm安装typescript 配置tsconfig.json 配置package.json的scripts命令 简单三步，你就可以通过简单的一步npm run xxx，TS文件们就乖乖的变为了js文件。 然后执行node dist/xx.js就能启动你的服务了。 但是，这不是我们所期望的。

VS Code默认缩进为2两个空格，修改为4个空格的方法。 一、首选项->设置，设置"editor.detectIndentation": false 二、ctrl+shift+x 打开插件下载页面，搜索beautify插件下载 三、在用户配置中，配置beautify（用户配置打开方式见步骤一） { "beautify.language": { "js": { "type": [ "javascript", "json" ], "filename": [ ".jshintrc", ".jsbeautify" ] }, "css": [ "css", "scss", "less" ], "html": [ "htm", "html", "vue" ] }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "less.lint.validProperties": [ "\"compress\": false", "\"sourceMap\": false" ], "less.compile": { "compress": false, "sourceMap": false, "out": true, "outExt": ".css", }, "git

在这一集我们将讲到如何从安装vue-cli开始，到新建一个本地项目，再到vscode中关于eslint的配置，以及本地项目关联公司远程项目的基本操作。 一，初始化本地项目 1，首先，全局安装vue-cli 3.0 2.检查vue-cli的版本,确定是3.0以上 3，新建一个叫question-editor的本地项目，注意这里的配置，预设置选择手动，勾选必要的Babel,Router,CSS预处理器,Linter格式化工具。不选择历史模式，CSS预处理器的选择看个人喜好，SCSS和Less其实语法区别不大，而ESLint的配置选择airbnb（在eslint的官方地址中star数高居第一，远超prettier和standard的存在），选择在保存时自动lint，独立放置配置文件，即可等待其初始化完成。 (顺便吐槽一下，在windows系统中的git bash方向键有问题，所以这里才用回自带的powershell来建项目) 　　 说一下历史模式这个问题，关于历史模式和哈希模式的区别不仅仅是有没有#号这么简单，历史模式还带来了关于二级菜单刷新出现404，重定向等问题，而哈希模式在url中仅仅是多了一个#号，就可以避免历史模式的所有缺陷，以及提供低版本浏览器甚至是ie的支持！所以在此墙裂不推荐使用历史模式。 二，在vscode中配置eslint 1，首先

管理->设置->扩展->Vetur { "workbench.colorTheme": "Monokai", "editor.fontSize": 14, "editor.lineHeight": 16, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "files.hotExit": "onExit", "editor.formatOnPaste": true, "editor.multiCursorModifier": "ctrlCmd", "editor.snippetSuggestions": "top", "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "explorer.confirmDelete": false, "vetur.completion.scaffoldSnippetSources": {}, "vetur.format.defaultFormatter.html": "js-beautify-html", // html 不换行 "vetur

前端开发规范 从制定到实施 在我们开始这个题目的时候，我们应该思考下面几个问题： 前端开发为什么需要 开发规范？ 前端开发规范是什么？ 什么时候需要这个规范？ 如何制定这个规范？ 如何落实这个规范？ [TOC] 一、前端开发为什么需要 开发规范？ why？ 前端还在 刀耕火种的时代的时候，前端是没有 工程 这个概念的。更多是 切图仔 这个概念，（将设计师设计出来的 web 、app、h5 的 UI 通过 PS 切图 然后再通过 HTML、CSS 实现出来）的这么一个工种。那么随着 互联网兴起到后来的移动互联网发展，To C 产品需求 精细化， 用户对于 C 端产品越来越挑剔也促使着 前端工程化越来越规范化了。 渐渐的 前端工程 形成，那么随之而来的就是 工程化 带来的 规范化 。 回到 why 的问题上来，我们先举一个简单的例子来说， 可能 工程化 这个名词在很多的后端语言中早早的就已经形成了，但前端 这么一门到现在大学课程都没开课的工种，全靠大学毕业后工作中自学积累而来，那么我们是否可以说，现阶段前端搞的好的人，Ta 的自学能力一定不会差。 二、前端开发规范是什么？ what? 什么是前端开发规范？ HTML\CSS\Javascript\TypeScript 的代码编写规范，这里我们着重讲一下 JS 的 编码规范 1、Types javascript 的数据类型 1.1

IntelliJ IDEA ESLint autofix/prettier Action 搜索Actions选择Fix ESLint Problems( Cmd - Shift - A on OS X or Ctrl + Shift + A on Windows and Linux): File Watchers 保存文件时自动 eslint -- fix : 保存文件时自动 prettier -- write ： 适用于IntelliJ IDEA/PHPStorm/WebStorm 参考链接： https://www.jetbrains.com/help/webstorm/using-file-watchers.html https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/ Related posts: 在IntelliJ IDEA中使用类似Sublime Text的选择功能 Webpack实时监听在IntelliJ IDEA中修改的文件 WebFont-macOS字体处理App Preload与Resource Hints 来源： oschina 链接： https://my.oschina.net/u/4329631/blog/3273765

ESLint+Prettier prettier只关注格式化 ,插件prettier-vscode,编辑器的配置setting.json会出现prettier插件的相关配置节点，同时也能看到一些默认的配置信息。 一定是下图这个搜出多个 安装成功后，编辑器默认的格式化处理就会被prettier代替， 默认快捷键是 alt + shift + f; 可以针对项目设置格式化参数，在项目根目录添加配置文件 .prettierrc 如格式化.vue文件时加分号，单引号给我变双引号需要在项目目录下增加 .prettierrc.json 更多选项查看 prettier官网 { "singleQuote":true,//使用单引号而不是双引号,true就是对 "semi":false//在语句结尾处打印分号,false就是不打印 } 插件ESLint在vscode中setting.json会出现ESLint的参数，有 eslintrc.js 配置文件 腾讯 AlloyTeam ESLint 配置https://github.com/AlloyTeam/eslint-config-alloy https://alloyteam.github.io/eslint-config-alloy/ 来源： oschina 链接： https://my.oschina.net/u/1431904/blog