VSCode,格式化和eslint冲突,结尾去掉逗号,分号等

1.VSCode安装ESLint插件
2.VSCode setting.json进行如下配置

setting.json怎么找?如下

 

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
   "editor.detectIndentation": false,
   // 重新设定tabsize
   "editor.tabSize": 2,
   // #每次保存的时候自动格式化 
   "editor.formatOnSave": true,
   // #每次保存的时候将代码按eslint格式进行修复
   "eslint.autoFixOnSave": true,
   // 添加 vue 支持
   "eslint.validate": [
       "javascript",
       "javascriptreact",
       {
           "language": "vue",
           "autoFix": true
       }
   ],
   //  #让prettier使用eslint的代码格式进行校验 
   "prettier.eslintIntegration": true,
   //  #去掉代码结尾的分号 
   "prettier.semi": false,
   //  #使用带引号替代双引号 
   "prettier.singleQuote": true,
   //  #让函数(名)和后面的括号之间加个空格
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   // #这个按用户自身习惯选择 
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   // #让vue中的js按编辑器自带的ts格式进行格式化 
   "vetur.format.defaultFormatter.js": "vscode-typescript",
   "vetur.format.defaultFormatterOptions": {
       "js-beautify-html": {
           "wrap_attributes": "force-aligned"
           // #vue组件中html代码格式化样式
       }
   },
   // 格式化stylus, 需安装Manta's Stylus Supremacy插件
   "stylusSupremacy.insertColons": false, // 是否插入冒号
   "stylusSupremacy.insertSemicolons": false, // 是否插入分好
   "stylusSupremacy.insertBraces": false, // 是否插入大括号
   "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
   "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}

 

Vue 格式化代码规则配置可以通过使用 ESLint 和 Prettier 这两个常见的代码规范工具来实现。下面是一些常用的配置规则: 1. 安装依赖:使用 npm 或者 yarn 安装相关依赖 ```bash npm install eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-vue -D ``` 2. 创建 ESLint 配置文件:在项目根目录下创建 `.eslintrc.js` 文件,并配置规则 ```javascript module.exports = { root: true, env: { node: true, es6: true, }, extends: ['plugin:vue/recommended', 'eslint:recommended', 'prettier'], parserOptions: { parser: 'babel-eslint', ecmaVersion: 2020, sourceType: 'module', }, plugins: ['prettier'], rules: { 'prettier/prettier': 'error', 'no-console': 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 其他自定义规则 }, }; ``` 在上面的配置中,我们使用了一些常见的规则,比如禁止使用 `console` 和 `debugger` 语句,以及使用了 Prettier 进行代码格式化检查。 3. 创建 Prettier 配置文件:在项目根目录下创建 `.prettierrc.js` 文件,并配置格式化规则 ```javascript module.exports = { printWidth: 80, // 每行代码长度 tabWidth: 2, // 缩进长度 useTabs: false, // 是否使用制表符 semi: true, // 是否在语句末尾分号 singleQuote: true, // 是否使用单引号 trailingComma: 'es5', // 对象、数组项是否使用尾逗号 bracketSpacing: true, // 是否在对象属性中添加空格 jsxBracketSameLine: false, // JSX 标签的尖括号是否换行 arrowParens: 'always', // 是否总是包含箭头函数参数的括号 endOfLine: 'auto', // 结尾是 \n \r \n\r auto }; ``` 在上面的配置中,我们针对一些常见的需求进行了配置,比如每行代码长度、缩进长度、是否使用分号等。 4. 在编辑器中安装相关插件:根据所使用的编辑器,安装对应的 ESLint 和 Prettier 插件,以便在保存代码时自动进行代码格式化和规范检查。 以上就是 Vue 格式化代码规则配置的基本过程和一些常见的配置规则。根据自己的需求,可以对配置文件进行进一步的自定义。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值