现在很多程序员写代码的时候都喜欢开着 eslint 进行代码格式校验, 写习惯了还好, 但是一般刚开始熟悉 eslint 的同学估计会被 eslint 的代码格式检查给逼疯的, 哈哈哈...
今天就讲讲如何在 vscode 中配置 eslint 代码格式化
1. 这里的前提是
vscode 中需要安装 eslint 和 prettier 两个工具
2. 打开 vscode 后点击右上角文件 ->首选项 ->设置进入用户配置面板
image.PNG
3. 然后我们开始做些用户配置, 具体配置如下
- {
- "editor.tabSize":2, #代码缩进修改成 2 个空格
- "editor.formatOnSave": true, #每次保存的时候自动格式化
- "eslint.autoFixOnSave": false, #每次保存的时候将代码按 eslint 格式进行修复
- "prettier.eslintIntegration": true, #让 prettier 使用 eslint 的代码格式进行校验
- "prettier.semi": false, #去掉代码结尾的分号
- "prettier.singleQuote": true, #使用带引号替代双引号
- "javascript.format.insertSpaceBeforeFunctionParenthesis": true #让函数 (名) 和后面的括号之间加个空格
- }
这样每次写完代码进行格式化 或者保存的时候会将代码自动转成符合 eslint 风格的代码了.
4. 除了以上配置以外, 在 vue 中要做几点额外配置, 具体如下
- {
- "vetur.format.defaultFormatter.html": "js-beautify-html", #这个按用户自身习惯选择
- "vetur.format.defaultFormatter.js": "vscode-typescript", #让 vue 中的 JS 按编辑器自带的 ts 格式进行格式化
- "vetur.format.defaultFormatterOptions": {
- "js-beautify-html": {
- "wrap_attributes": "force-aligned" #vue 组件中 HTML 代码格式化样式
- }
- }
- }
5. 如果你使用的 CSS 预处理器是 stylus, 那么还需要加入以下配置
- {
- "stylusSupremacy.insertSemicolons": false, #去掉分号
- "stylusSupremacy.insertBraces": false, #去掉大括号
- "stylusSupremacy.insertColons": false #去掉冒号
- }
来源: http://www.bubuko.com/infodetail-2981308.html