vs code 配置 stylelint eslint
Posted 「已注销」
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vs code 配置 stylelint eslint相关的知识,希望对你有一定的参考价值。
安装npm插件
- npm install –save-dev eslint
- npm isntall –save-dev stylelint
- npm install –save-dev stylelint-config-standard
安装vs code的插件
- eslint
- stylelint
在项目根目录下创建文件
创建 .eslintrc.js文件
// https://eslint.org/docs/user-guide/configuring
module.exports =
root: true,
parser: 'babel-eslint',
parserOptions:
sourceType: 'module'
,
env:
browser: true,
es6: true,
amd: true,
commonjs: true
,
globals:
__HOST__: false,
BMap: false,
$: false,
Vue: false,
Vuex: false,
vueRouter: false
,
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: "standard",
// required to lint *.vue files
plugins: [
'html',// eslint-plugin-html
'vue', // 全称eslint-plugin-vue
],
// add your custom rules here
rules:
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
"indent": ["error", 4, "SwitchCase": 1 ],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"space-before-function-paren": ["error", "never"],
"require-jsdoc": ["error",
"require":
"FunctionDeclaration": true,
"MethodDefinition": true,
"ClassDeclaration": true,
"ArrowFunctionExpression": false
],
"valid-jsdoc": ["error",
"requireReturn": false
]
创建.eslintignore文件
//这进而的配置是在编译时过滤掉不验证的目录或文件
创建.stylelintrc文件
// 扩展第三方插件规范stylelint-config-standard
"extends": "stylelint-config-standard",
"rules":
"function-url-quotes": "always",
"indentation": 4, //缩进4位
"number-leading-zero": null,
"unit-whitelist": [
"em",
"rem",
"s",
"%",
"px",
"deg"
]
创建.stylelintignore文件
//这进而的配置是在编译时过滤掉不验证的目录或文件
vs code自定义用户配置
//"workbench.iconTheme": "vscode-icons", //工作台图标主题
// 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
"editor.tabSize": 4,
"editor.detectIndentation": true,
// 以像素为单位控制字号。
"editor.fontSize": 18,
// 控制终端游标是否闪烁。
"terminal.integrated.cursorBlinking": true,
// 保存时候自动格式化
"editor.formatOnSave": false,
// 让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.validation.template": false,
// 用来进行保存时自动格式化,但是默认只支持 javascript .js 文件
"eslint.autoFixOnSave": false,
// 终端cmd字体
"terminal.integrated.fontFamily": "monospace",
// 终端cmd字号
"terminal.integrated.fontSize": 16,
// 默认格式化html使用js-beautify-html
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions":
"js-beautify-html":
// [auto|force|force-aligned|force-expand-multiline]
// 属性多行排列
"wrap_attributes": "auto" // vue组件中html代码格式化样式
,
"eslint.validate": [
"html",
"vue",
// 这样就能够直接支持在html和vue中自动保存成eslint风格的代码
"language": "html",
"autoFix": true
,
"language": "vue",
"autoFix": true
],
// 防止格式化代码后单引号变双引号
// "prettier.singleQuote": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"files.autoSave": "off",
// "background.customImages": [
// "file:///D:/用户目录/Pictures/bg1.jpg"
// ],
// "background.useDefault": false,
// "background.style":
// "content": "''",
// "pointer-events": "none",
// "position": "absolute",
// "z-index": "99999",
// "width": "100%",
// "height": "100%",
// "background-position": "center",
// "background-repeat": "no-repeat",
// "opacity": 0.1
// ,
// gitlens配置
"gitlens.advanced.messages":
"suppressCommitHasNoPreviousCommitWarning": true,
"suppressCommitNotFoundWarning": true,
"suppressFileNotUnderSourceControlWarning": true,
"suppressGitVersionWarning": true,
"suppressLineUncommittedWarning": true,
"suppressNoRepositoryWarning": true,
"suppressResultsExplorerNotice": true,
"suppressShowKeyBindingsNotice": true
,
"workbench.startupEditor": "newUntitledFile",
"git.confirmSync": false,
"files.autoSaveDelay": 3000,
//"gitlens.historyExplorer.enabled": true,
//"terminal.integrated.rendererType": "dom",
"search.followSymlinks": false, // "easysass.compileAfterSave": true,
// "easysass.excludeRegex": "",
// "easysass.formats": [
//
// "format": "compact",
// "extension": ".css"
//
// ],
// "easysass.targetDir": "",
"css.validate": false,
"less.validate": false,
"scss.validate": true,
"prettier.tabWidth": 4 //缩进js sass; 安装vscode prettier插件
以上是关于vs code 配置 stylelint eslint的主要内容,如果未能解决你的问题,请参考以下文章
如何在 VS Code 编辑器中使用 ESLint + Airbnb 规则 + TypeScript + Stylelint 为 SCSS 配置 Vue CLI 4,并在保存时自动修复?