diff --git a/packages/core/package.json b/packages/core/package.json
index 9c053cc..65138f2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -42,7 +42,6 @@
   "dependencies": {
     "@tidbcloud/tisqleditor-extension-basic-setup": "workspace:^",
     "@tidbcloud/tisqleditor-extension-cur-sql": "workspace:^",
-    "@tidbcloud/tisqleditor-extension-lang-sql": "workspace:^",
     "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^"
   }
 }
diff --git a/packages/core/src/editor-instance.ts b/packages/core/src/editor-instance.ts
index 96c6187..27fa9d3 100644
--- a/packages/core/src/editor-instance.ts
+++ b/packages/core/src/editor-instance.ts
@@ -1,7 +1,7 @@
-import { SQLConfig } from '@codemirror/lang-sql'
-import { search } from '@codemirror/search'
-import { Compartment, EditorState, Extension } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
+import { Compartment, EditorState, Extension } from '@codemirror/state'
+import { SQLConfig, sql, MySQL } from '@codemirror/lang-sql'
+import { search } from '@codemirror/search'
 
 import {
   BasicSetupOptions,
@@ -12,12 +12,18 @@ import {
   getSqlStatements,
   getNearbyStatement
 } from '@tidbcloud/tisqleditor-extension-sql-parser'
-import { langSql } from '@tidbcloud/tisqleditor-extension-lang-sql'
 import {
   curSql,
   getCurStatements
 } from '@tidbcloud/tisqleditor-extension-cur-sql'
 
+const langSql = (config: SQLConfig) =>
+  sql({
+    dialect: MySQL,
+    upperCaseKeywords: true,
+    ...config
+  })
+
 export class SQLEditorInstance {
   constructor(
     public editorId: string,
@@ -100,8 +106,10 @@ export const createSQLEditorInstance = ({
     search({
       top: true
     }),
+
     themeCompartment.of(theme),
     sqlCompartment.of(langSql(sqlConfig)),
+
     sqlParser(),
     curSql(),
 
diff --git a/packages/extensions/autocomplete/src/index.ts b/packages/extensions/autocomplete/src/index.ts
index 3491a64..7e6ba87 100644
--- a/packages/extensions/autocomplete/src/index.ts
+++ b/packages/extensions/autocomplete/src/index.ts
@@ -1,3 +1,5 @@
+import { EditorState } from '@codemirror/state'
+import { EditorView, Rect, keymap } from '@codemirror/view'
 import {
   acceptCompletion,
   autocompletion,
@@ -6,8 +8,7 @@ import {
   CompletionSource
 } from '@codemirror/autocomplete'
 import { indentLess, indentMore } from '@codemirror/commands'
-import { EditorState } from '@codemirror/state'
-import { EditorView, Rect, keymap } from '@codemirror/view'
+
 import {
   Brackets,
   Calendar,
@@ -203,9 +204,12 @@ const baseTheme = EditorView.baseTheme({
       color: '#333333'
     }
   },
-  '.cm-autocomplete-item > img': {
-    marginRight: '10px',
-    verticalAlign: 'middle'
+  '.cm-autocomplete-item': {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  '.cm-autocomplete-item > div.icon': {
+    marginRight: '10px'
   },
   '.cm-autocomplete-item .cm-completionIcon-keyword': {
     paddingRight: '24px'
@@ -319,8 +323,9 @@ const customAutoCompletion = (config: AutoCompletionConfig) => {
           }
 
           if (src) {
-            const element = document.createElement('img')
-            element.src = src
+            const element = document.createElement('div')
+            element.className = 'icon'
+            element.innerHTML = src
             return element
           } else {
             return null
@@ -347,6 +352,6 @@ const autoCompleteTab = (config: AutoCompletionConfig) => {
   ])
 }
 
-export function autoCompletion(config: AutoCompletionConfig) {
+export function autoCompletion(config: AutoCompletionConfig = {}) {
   return [baseTheme, customAutoCompletion(config), autoCompleteTab(config)]
 }
diff --git a/packages/extensions/cur-sql-gutter/src/index.ts b/packages/extensions/cur-sql-gutter/src/index.ts
index 32433f9..b14bad3 100644
--- a/packages/extensions/cur-sql-gutter/src/index.ts
+++ b/packages/extensions/cur-sql-gutter/src/index.ts
@@ -7,18 +7,18 @@ export interface CurSqlGutterConfig {
   backgroundColor?: string
   width?: number
   className?: string
-  shouldDisplay?: (view: EditorView) => boolean
+  whenHide?: (view: EditorView) => boolean
 }
 
 function getMarkers(
   view: EditorView,
   curSqlMarker: GutterMarker,
-  config?: CurSqlGutterConfig
+  config: CurSqlGutterConfig
 ) {
   let markers = RangeSet.empty
 
   // when something happens, hide the gutter
-  if (config?.shouldDisplay && !config.shouldDisplay(view)) {
+  if (config.whenHide && config.whenHide(view)) {
     return markers
   }
 
@@ -54,10 +54,10 @@ function getMarkers(
 /**
  * gutter style
  */
-const baseTheme = (config?: CurSqlGutterConfig) => {
+const baseTheme = (config: CurSqlGutterConfig) => {
   return EditorView.baseTheme({
     '.cm-sql-gutter .cm-gutterElement': {
-      width: `${config?.width ?? 2}px`
+      width: `${config.width ?? 2}px`
     },
     '.cm-lineNumbers .cm-gutterElement': {
       paddingLeft: '8px',
@@ -66,19 +66,19 @@ const baseTheme = (config?: CurSqlGutterConfig) => {
   })
 }
 
-const sqlGutter = (curSqlMarker: GutterMarker, config?: CurSqlGutterConfig) => {
+const sqlGutter = (curSqlMarker: GutterMarker, config: CurSqlGutterConfig) => {
   return gutter({
-    class: `cm-sql-gutter ${config?.className || ''}`,
+    class: `cm-sql-gutter ${config.className || ''}`,
     initialSpacer: () => curSqlMarker,
     markers: (view: EditorView) => getMarkers(view, curSqlMarker, config)
   })
 }
 
-export const curSqlGutter = (config?: CurSqlGutterConfig) => {
+export const curSqlGutter = (config: CurSqlGutterConfig = {}) => {
   const curSqlMarker = new (class extends GutterMarker {
     toDOM() {
       const el = document.createElement('div')
-      el.style.background = config?.backgroundColor || '#0CA6F2'
+      el.style.background = config.backgroundColor || '#0CA6F2'
       el.style.height = '100%'
       return el
     }
diff --git a/packages/extensions/grammar-linter/package.json b/packages/extensions/grammar-linter/package.json
deleted file mode 100644
index 05a8335..0000000
--- a/packages/extensions/grammar-linter/package.json
+++ /dev/null
@@ -1,44 +0,0 @@
-{
-  "name": "@tidbcloud/tisqleditor-extension-grammar-linter",
-  "version": "0.0.1",
-  "description": "tisqleditor extensions",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/*.js",
-    "dist/*.ts",
-    "package.json",
-    "README.md"
-  ],
-  "scripts": {
-    "tsc:watch": "tsc --watch",
-    "rollup:watch": "rollup -c --watch",
-    "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"",
-    "build": "tsc && rollup -c"
-  },
-  "keywords": [
-    "tidbcloud",
-    "sql",
-    "editor",
-    "extensions",
-    "grammar linter"
-  ],
-  "author": "",
-  "license": "MIT",
-  "devDependencies": {
-    "@codemirror/lint": "^6.8.0",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.26.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "rollup": "^4.18.0",
-    "tslib": "^2.6.3",
-    "typescript": "^5.4.5"
-  },
-  "peerDependencies": {
-    "@codemirror/lint": "^6.8.0",
-    "@codemirror/state": "^6.4.1",
-    "@codemirror/view": "^6.26.3"
-  }
-}
diff --git a/packages/extensions/grammar-linter/rollup.config.js b/packages/extensions/grammar-linter/rollup.config.js
deleted file mode 100644
index aed0a34..0000000
--- a/packages/extensions/grammar-linter/rollup.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import typescript from '@rollup/plugin-typescript'
-
-export default {
-  input: './src/index.ts',
-  output: {
-    dir: './dist',
-    format: 'es'
-  },
-  plugins: [typescript()]
-}
diff --git a/packages/extensions/grammar-linter/src/index.ts b/packages/extensions/grammar-linter/src/index.ts
deleted file mode 100644
index 7cb3f0b..0000000
--- a/packages/extensions/grammar-linter/src/index.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { linter, Diagnostic } from '@codemirror/lint'
-import { Extension } from '@codemirror/state'
-import { EditorView } from '@codemirror/view'
-
-export interface GrammerLinterConfig {
-  title?: string
-  content?: string
-}
-
-export interface RegexpItem {
-  reg: RegExp
-  title: string
-  message: string
-}
-
-export const linterBaseTheme: Extension = EditorView.baseTheme({
-  '.cm-tooltip-hover': {
-    marginTop: '4px',
-    borderRadius: '8px'
-  },
-  '&light .cm-tooltip-hover': {
-    border: '1px solid #EDEDED'
-  },
-  '&dark .cm-tooltip.cm-tooltip-hover': {
-    border: '1px solid #393939',
-    backgroundColor: '#222'
-  },
-  '&light .cm-tooltip.cm-tooltip-hover .linter-tooltip-content': {
-    color: '#851D38'
-  },
-  '&dark .cm-tooltip.cm-tooltip-hover .linter-tooltip-content': {
-    color: '#f08d83'
-  },
-  '.cm-tooltip-hover .cm-diagnostic': {
-    borderLeft: 'none'
-  },
-  '.cm-tooltip-hover .linter-tooltip-title': {
-    margin: '8px 4px 4px',
-    fontWeight: 600,
-    color: '#851D38'
-  },
-  '.cm-tooltip-hover .linter-tooltip-content': {
-    margin: '0 4px 8px',
-    width: '360px',
-    fontSize: 12,
-    lineHeight: '18px'
-  },
-  '.cm-tooltip-hover a': {
-    fontWeight: 600
-  }
-})
-
-export const hintEle = (title?: string, content?: string) => {
-  const ele = document.createDocumentFragment()
-  const titleEle = document.createElement('div')
-  titleEle.textContent = title ?? 'Invalid Character'
-  titleEle.className = 'linter-tooltip-title'
-  ele.appendChild(titleEle)
-
-  const tips = document.createElement('div')
-  tips.innerHTML = `<div>${content}</div>`
-  tips.className = 'linter-tooltip-content'
-  ele.appendChild(tips)
-  return ele
-}
-
-const chineseCharacterCheckParser = (config: GrammerLinterConfig) => {
-  return linter((view) => {
-    const diagnostics: Diagnostic[] = []
-    view.visibleRanges.forEach((range) => {
-      const content = view.state.sliceDoc(range.from, range.to)
-      for (let i = 0; i < content.length; i++) {
-        const char = content.charAt(i)
-        // unicode: /[\u0080-\uFFFF]/
-        if (char.charCodeAt(0) >= 0x80) {
-          diagnostics.push({
-            from: range.from + i,
-            to: range.from + i + 1,
-            severity: 'error',
-            message: '',
-            renderMessage: () => {
-              const codeNum = char.charCodeAt(0) - 65248
-              const tips =
-                codeNum > 0
-                  ? `The character "${char}" could be confused with "${String.fromCharCode(
-                      codeNum
-                    )}", which is more common in source code.`
-                  : 'The character is invalid.'
-              return hintEle(config.title || '', config.content || tips)
-            }
-          })
-        }
-      }
-    })
-
-    return diagnostics
-  })
-}
-
-const regexMatchParser = (regs: RegexpItem[]) => {
-  return linter((view) => {
-    const diagnostics: Diagnostic[] = []
-    view.visibleRanges.forEach((range) => {
-      const content = view.state.sliceDoc(range.from, range.to)
-      const matches: {
-        title: string
-        message: string
-        matchArr: RegExpMatchArray
-      }[] = []
-
-      regs.forEach((reg) => {
-        const cur = [...Array.from(content.matchAll(reg.reg))]
-        matches.push(
-          ...cur.map((item) => ({
-            title: reg.title,
-            message: reg.message,
-            matchArr: item
-          }))
-        )
-      })
-
-      matches.forEach((match) => {
-        const { index } = match.matchArr
-        if (index !== undefined) {
-          diagnostics.push({
-            from: index,
-            to: index + match.matchArr[0].length,
-            severity: 'error',
-            renderMessage: () => {
-              return hintEle(match.title, match.message)
-            },
-            message: ''
-          })
-        }
-      })
-    })
-
-    return diagnostics
-  })
-}
-
-export const chineseCharacterLinter = (config: GrammerLinterConfig) => {
-  return [chineseCharacterCheckParser(config), linterBaseTheme]
-}
-
-export const regexMatchLinter = (config: RegexpItem[]) => {
-  return [regexMatchParser(config), linterBaseTheme]
-}
diff --git a/packages/extensions/grammar-linter/tsconfig.json b/packages/extensions/grammar-linter/tsconfig.json
deleted file mode 100644
index 6a62dbc..0000000
--- a/packages/extensions/grammar-linter/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist"
-  },
-  "include": ["./src"]
-}
diff --git a/packages/extensions/lang-sql/package.json b/packages/extensions/lang-sql/package.json
deleted file mode 100644
index b0e1b1a..0000000
--- a/packages/extensions/lang-sql/package.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "@tidbcloud/tisqleditor-extension-lang-sql",
-  "version": "0.0.1",
-  "description": "tisqleditor extensions",
-  "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/*.js",
-    "dist/*.ts",
-    "package.json",
-    "README.md"
-  ],
-  "scripts": {
-    "tsc:watch": "tsc --watch",
-    "rollup:watch": "rollup -c --watch",
-    "dev": "concurrently --kill-others \"pnpm tsc:watch\" \"pnpm rollup:watch\"",
-    "build": "tsc && rollup -c"
-  },
-  "keywords": [
-    "tidbcloud",
-    "sql",
-    "editor",
-    "extensions",
-    "lang sql"
-  ],
-  "author": "",
-  "license": "MIT",
-  "devDependencies": {
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/lang-sql": "^6.6.4",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "rollup": "^4.18.0",
-    "tslib": "^2.6.3",
-    "typescript": "^5.4.5"
-  },
-  "peerDependencies": {
-    "@codemirror/language": "^6.10.2",
-    "@codemirror/lang-sql": "^6.6.4"
-  }
-}
diff --git a/packages/extensions/lang-sql/rollup.config.js b/packages/extensions/lang-sql/rollup.config.js
deleted file mode 100644
index aed0a34..0000000
--- a/packages/extensions/lang-sql/rollup.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import typescript from '@rollup/plugin-typescript'
-
-export default {
-  input: './src/index.ts',
-  output: {
-    dir: './dist',
-    format: 'es'
-  },
-  plugins: [typescript()]
-}
diff --git a/packages/extensions/lang-sql/src/index.ts b/packages/extensions/lang-sql/src/index.ts
deleted file mode 100644
index 0e2bb2b..0000000
--- a/packages/extensions/lang-sql/src/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { MySQL, sql, SQLConfig } from '@codemirror/lang-sql'
-import { LanguageSupport } from '@codemirror/language'
-
-export const langSql = (config: SQLConfig): LanguageSupport =>
-  sql({
-    dialect: MySQL,
-    upperCaseKeywords: true,
-    ...config
-  })
diff --git a/packages/extensions/lang-sql/tsconfig.json b/packages/extensions/lang-sql/tsconfig.json
deleted file mode 100644
index 6a62dbc..0000000
--- a/packages/extensions/lang-sql/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist"
-  },
-  "include": ["./src"]
-}
diff --git a/packages/extensions/database-linter/package.json b/packages/extensions/linters/package.json
similarity index 86%
rename from packages/extensions/database-linter/package.json
rename to packages/extensions/linters/package.json
index cf76741..ba7555a 100644
--- a/packages/extensions/database-linter/package.json
+++ b/packages/extensions/linters/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@tidbcloud/tisqleditor-extension-database-linter",
+  "name": "@tidbcloud/tisqleditor-extension-linters",
   "version": "0.0.1",
   "description": "tisqleditor extensions",
   "type": "module",
@@ -23,13 +23,14 @@
     "sql",
     "editor",
     "extensions",
-    "database linter"
+    "linters"
   ],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "@codemirror/lint": "^6.8.0",
     "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "rollup": "^4.18.0",
     "tslib": "^2.6.3",
@@ -41,7 +42,6 @@
     "@codemirror/view": "^6.26.3"
   },
   "dependencies": {
-    "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^",
-    "@tidbcloud/tisqleditor-extension-grammar-linter": "workspace:^"
+    "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^"
   }
 }
diff --git a/packages/extensions/database-linter/rollup.config.js b/packages/extensions/linters/rollup.config.js
similarity index 100%
rename from packages/extensions/database-linter/rollup.config.js
rename to packages/extensions/linters/rollup.config.js
diff --git a/packages/extensions/linters/src/char-linter.ts b/packages/extensions/linters/src/char-linter.ts
new file mode 100644
index 0000000..1592a49
--- /dev/null
+++ b/packages/extensions/linters/src/char-linter.ts
@@ -0,0 +1,45 @@
+import { linter, Diagnostic } from '@codemirror/lint'
+
+import { hintEle, linterBaseTheme } from './lint-style'
+
+export interface charLinterConfig {
+  title?: string
+  content?: string
+}
+
+const fullWidthCharChecker = (config: charLinterConfig) =>
+  linter((view) => {
+    const diagnostics: Diagnostic[] = []
+
+    view.visibleRanges.forEach((range) => {
+      const content = view.state.sliceDoc(range.from, range.to)
+      for (let i = 0; i < content.length; i++) {
+        const char = content.charAt(i)
+        // unicode: /[\u0080-\uFFFF]/
+        if (char.charCodeAt(0) >= 0x80) {
+          diagnostics.push({
+            from: range.from + i,
+            to: range.from + i + 1,
+            severity: 'error',
+            message: '',
+            renderMessage: () => {
+              const codeNum = char.charCodeAt(0) - 65248
+              const tips =
+                codeNum > 0
+                  ? `The character "${char}" could be confused with "${String.fromCharCode(
+                      codeNum
+                    )}", which is more common in source code.`
+                  : 'The character is invalid.'
+              return hintEle(config.title || '', config.content || tips)
+            }
+          })
+        }
+      }
+    })
+
+    return diagnostics
+  })
+
+export const fullWidthCharLinter = (config: charLinterConfig = {}) => {
+  return [fullWidthCharChecker(config), linterBaseTheme]
+}
diff --git a/packages/extensions/linters/src/index.ts b/packages/extensions/linters/src/index.ts
new file mode 100644
index 0000000..466a690
--- /dev/null
+++ b/packages/extensions/linters/src/index.ts
@@ -0,0 +1,3 @@
+export * from './use-db-linter'
+export * from './char-linter'
+export * from './regex-match-linter'
diff --git a/packages/extensions/linters/src/lint-style.ts b/packages/extensions/linters/src/lint-style.ts
new file mode 100644
index 0000000..13e5286
--- /dev/null
+++ b/packages/extensions/linters/src/lint-style.ts
@@ -0,0 +1,53 @@
+import { Extension } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+
+export const linterBaseTheme: Extension = EditorView.baseTheme({
+  '.cm-tooltip-hover': {
+    marginTop: '4px',
+    borderRadius: '8px'
+  },
+  '&light .cm-tooltip-hover': {
+    border: '1px solid #EDEDED'
+  },
+  '&dark .cm-tooltip.cm-tooltip-hover': {
+    border: '1px solid #393939',
+    backgroundColor: '#222'
+  },
+  '&light .cm-tooltip.cm-tooltip-hover .linter-tooltip-content': {
+    color: '#851D38'
+  },
+  '&dark .cm-tooltip.cm-tooltip-hover .linter-tooltip-content': {
+    color: '#f08d83'
+  },
+  '.cm-tooltip-hover .cm-diagnostic': {
+    borderLeft: 'none'
+  },
+  '.cm-tooltip-hover .linter-tooltip-title': {
+    margin: '8px 4px 4px',
+    fontWeight: 600,
+    color: '#851D38'
+  },
+  '.cm-tooltip-hover .linter-tooltip-content': {
+    margin: '0 4px 8px',
+    width: '360px',
+    fontSize: 12,
+    lineHeight: '18px'
+  },
+  '.cm-tooltip-hover a': {
+    fontWeight: 600
+  }
+})
+
+export const hintEle = (title?: string, content?: string) => {
+  const ele = document.createDocumentFragment()
+  const titleEle = document.createElement('div')
+  titleEle.textContent = title ?? ''
+  titleEle.className = 'linter-tooltip-title'
+  ele.appendChild(titleEle)
+
+  const tips = document.createElement('div')
+  tips.textContent = content ?? ''
+  tips.className = 'linter-tooltip-content'
+  ele.appendChild(tips)
+  return ele
+}
diff --git a/packages/extensions/linters/src/regex-match-linter.ts b/packages/extensions/linters/src/regex-match-linter.ts
new file mode 100644
index 0000000..78b7fac
--- /dev/null
+++ b/packages/extensions/linters/src/regex-match-linter.ts
@@ -0,0 +1,54 @@
+import { linter, Diagnostic } from '@codemirror/lint'
+import { hintEle, linterBaseTheme } from './lint-style'
+
+export interface RegexpItem {
+  reg: RegExp
+  title: string
+  message: string
+}
+
+const regexMatchParser = (regs: RegexpItem[]) =>
+  linter((view) => {
+    const diagnostics: Diagnostic[] = []
+
+    view.visibleRanges.forEach((range) => {
+      const content = view.state.sliceDoc(range.from, range.to)
+      const matches: {
+        title: string
+        message: string
+        matchArr: RegExpMatchArray
+      }[] = []
+
+      regs.forEach((reg) => {
+        const cur = [...Array.from(content.matchAll(reg.reg))]
+        matches.push(
+          ...cur.map((item) => ({
+            title: reg.title,
+            message: reg.message,
+            matchArr: item
+          }))
+        )
+      })
+
+      matches.forEach((match) => {
+        const { index } = match.matchArr
+        if (index !== undefined) {
+          diagnostics.push({
+            from: index,
+            to: index + match.matchArr[0].length,
+            severity: 'error',
+            renderMessage: () => {
+              return hintEle(match.title, match.message)
+            },
+            message: ''
+          })
+        }
+      })
+    })
+
+    return diagnostics
+  })
+
+export const regexMatchLinter = (config: RegexpItem[]) => {
+  return [regexMatchParser(config), linterBaseTheme]
+}
diff --git a/packages/extensions/database-linter/src/index.ts b/packages/extensions/linters/src/use-db-linter.ts
similarity index 79%
rename from packages/extensions/database-linter/src/index.ts
rename to packages/extensions/linters/src/use-db-linter.ts
index 9ce8bbf..aac3ef9 100644
--- a/packages/extensions/database-linter/src/index.ts
+++ b/packages/extensions/linters/src/use-db-linter.ts
@@ -1,23 +1,22 @@
+import { EditorView } from '@codemirror/view'
 import { linter, Diagnostic } from '@codemirror/lint'
 
 import { getSqlStatements } from '@tidbcloud/tisqleditor-extension-sql-parser'
-import {
-  hintEle,
-  linterBaseTheme
-} from '@tidbcloud/tisqleditor-extension-grammar-linter'
+
+import { hintEle, linterBaseTheme } from './lint-style'
 
 export type DBLinterOptions = {
   level?: 'error' | 'warning'
   title?: string
   message?: string
-  preCheck?: () => string
+  whenDisable?: (view: EditorView) => boolean
 }
 
 const databaseLinter = (config: DBLinterOptions) =>
   linter((view) => {
     const diagnostics: Diagnostic[] = []
 
-    if (config.preCheck && config.preCheck()) {
+    if (config.whenDisable && config.whenDisable(view)) {
       return diagnostics
     }
 
@@ -42,6 +41,6 @@ const databaseLinter = (config: DBLinterOptions) =>
     return diagnostics
   })
 
-export function dbLinter(config: DBLinterOptions) {
+export function useDbLinter(config: DBLinterOptions = {}) {
   return [databaseLinter(config), linterBaseTheme]
 }
diff --git a/packages/extensions/database-linter/tsconfig.json b/packages/extensions/linters/tsconfig.json
similarity index 100%
rename from packages/extensions/database-linter/tsconfig.json
rename to packages/extensions/linters/tsconfig.json
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 97d6cd6..db1aaeb 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.16.2",
     "@codemirror/lang-sql": "^6.6.4",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
@@ -22,7 +21,9 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.45.1",
+    "@tidbcloud/tisqleditor-extension-autocomplete": "workspace:^",
     "@tidbcloud/tisqleditor-extension-cur-sql-gutter": "workspace:^",
+    "@tidbcloud/tisqleditor-extension-linters": "workspace:^",
     "@tidbcloud/tisqleditor-extension-save-helper": "workspace:^",
     "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^",
     "@tidbcloud/tisqleditor-extension-themes": "workspace:^",
diff --git a/packages/playground/src/components/biz/editor-panel/actions.tsx b/packages/playground/src/components/biz/editor-panel/actions.tsx
index 343d587..756eeb6 100644
--- a/packages/playground/src/components/biz/editor-panel/actions.tsx
+++ b/packages/playground/src/components/biz/editor-panel/actions.tsx
@@ -20,23 +20,24 @@ export function EditorActions() {
     const activeEditor = cacheCtx.getEditor(activeFileId)
     if (!activeEditor) return
 
-    const nearbyStatement = activeEditor.getNearbyStatement()
-    if (!nearbyStatement) {
-      return
-    }
+    const curStatements = activeEditor.getCurStatements()
+    if (curStatements[0].content === '') return
 
-    setRunResult({ statement: nearbyStatement.content, status: 'running' })
-    try {
-      const res = await runStatement(activeFileId, nearbyStatement)
-      console.log('res:', res)
-      setRunResult(res)
-    } catch (error: any) {
-      console.log('error:', error)
-      setRunResult({
-        statement: nearbyStatement.content,
-        status: 'error',
-        message: error.message ?? 'unknown error'
-      })
+    const lastStatement = curStatements.at(-1)
+    if (lastStatement) {
+      setRunResult({ statement: lastStatement.content, status: 'running' })
+      try {
+        const res = await runStatement(activeFileId, lastStatement)
+        console.log('res:', res)
+        setRunResult(res)
+      } catch (error: any) {
+        console.log('error:', error)
+        setRunResult({
+          statement: lastStatement.content,
+          status: 'error',
+          message: error.message ?? 'unknown error'
+        })
+      }
     }
   }
 
diff --git a/packages/playground/src/components/biz/editor-panel/editor.tsx b/packages/playground/src/components/biz/editor-panel/editor.tsx
index 80e7933..9baf684 100644
--- a/packages/playground/src/components/biz/editor-panel/editor.tsx
+++ b/packages/playground/src/components/biz/editor-panel/editor.tsx
@@ -7,11 +7,15 @@ import { SQLEditor } from '@tidbcloud/tisqleditor-react'
 import { saveHelper } from '@tidbcloud/tisqleditor-extension-save-helper'
 import { bbedit, oneDark } from '@tidbcloud/tisqleditor-extension-themes'
 import { curSqlGutter } from '@tidbcloud/tisqleditor-extension-cur-sql-gutter'
+import {
+  useDbLinter,
+  fullWidthCharLinter
+} from '@tidbcloud/tisqleditor-extension-linters'
+import { autoCompletion } from '@tidbcloud/tisqleditor-extension-autocomplete'
 
 import { useFilesContext } from '@/contexts/files-context'
 import { useTheme } from '@/components/darkmode-toggle/theme-provider'
 import { SchemaRes, useSchemaContext } from '@/contexts/schema-context'
-import { autocompletion } from '@codemirror/autocomplete'
 
 function convertSchemaToSQLConfig(dbList: SchemaRes): SQLConfig {
   const schema: any = {}
@@ -68,12 +72,18 @@ export function Editor() {
             saveFile(activeFile.id, view.state.doc.toString())
           }
         }),
-        autocompletion(),
+        autoCompletion(),
         curSqlGutter({
-          shouldDisplay: (_view) => {
-            return true
+          whenHide: (_view) => {
+            return false
           }
-        })
+        }),
+        useDbLinter({
+          whenDisable: (_view) => {
+            return false
+          }
+        }),
+        fullWidthCharLinter()
       ]
     }
     return []
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00c224b..b6e2040 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,9 +35,6 @@ importers:
       '@tidbcloud/tisqleditor-extension-cur-sql':
         specifier: workspace:^
         version: link:../extensions/cur-sql
-      '@tidbcloud/tisqleditor-extension-lang-sql':
-        specifier: workspace:^
-        version: link:../extensions/lang-sql
       '@tidbcloud/tisqleditor-extension-sql-parser':
         specifier: workspace:^
         version: link:../extensions/sql-parser
@@ -193,37 +190,6 @@ importers:
         specifier: ^5.4.5
         version: 5.4.5
 
-  packages/extensions/database-linter:
-    dependencies:
-      '@codemirror/view':
-        specifier: ^6.26.3
-        version: 6.26.3
-      '@tidbcloud/tisqleditor-extension-grammar-linter':
-        specifier: workspace:^
-        version: link:../grammar-linter
-      '@tidbcloud/tisqleditor-extension-sql-parser':
-        specifier: workspace:^
-        version: link:../sql-parser
-    devDependencies:
-      '@codemirror/lint':
-        specifier: ^6.8.0
-        version: 6.8.0
-      '@codemirror/state':
-        specifier: ^6.4.1
-        version: 6.4.1
-      '@rollup/plugin-typescript':
-        specifier: ^11.1.6
-        version: 11.1.6(rollup@4.18.0)(tslib@2.6.3)(typescript@5.4.5)
-      rollup:
-        specifier: ^4.18.0
-        version: 4.18.0
-      tslib:
-        specifier: ^2.6.3
-        version: 2.6.3
-      typescript:
-        specifier: ^5.4.5
-        version: 5.4.5
-
   packages/extensions/events:
     dependencies:
       '@tidbcloud/tisqleditor-extension-cur-sql':
@@ -249,7 +215,11 @@ importers:
         specifier: ^5.4.5
         version: 5.4.5
 
-  packages/extensions/grammar-linter:
+  packages/extensions/linters:
+    dependencies:
+      '@tidbcloud/tisqleditor-extension-sql-parser':
+        specifier: workspace:^
+        version: link:../sql-parser
     devDependencies:
       '@codemirror/lint':
         specifier: ^6.8.0
@@ -273,27 +243,6 @@ importers:
         specifier: ^5.4.5
         version: 5.4.5
 
-  packages/extensions/lang-sql:
-    devDependencies:
-      '@codemirror/lang-sql':
-        specifier: ^6.6.4
-        version: 6.6.4(@codemirror/view@6.26.3)
-      '@codemirror/language':
-        specifier: ^6.10.2
-        version: 6.10.2
-      '@rollup/plugin-typescript':
-        specifier: ^11.1.6
-        version: 11.1.6(rollup@4.18.0)(tslib@2.6.3)(typescript@5.4.5)
-      rollup:
-        specifier: ^4.18.0
-        version: 4.18.0
-      tslib:
-        specifier: ^2.6.3
-        version: 2.6.3
-      typescript:
-        specifier: ^5.4.5
-        version: 5.4.5
-
   packages/extensions/save-helper:
     devDependencies:
       '@codemirror/state':
@@ -368,9 +317,6 @@ importers:
 
   packages/playground:
     dependencies:
-      '@codemirror/autocomplete':
-        specifier: ^6.16.2
-        version: 6.16.2(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
       '@codemirror/lang-sql':
         specifier: ^6.6.4
         version: 6.6.4(@codemirror/view@6.26.3)
@@ -404,9 +350,15 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.45.1
         version: 5.45.1(react@18.3.1)
+      '@tidbcloud/tisqleditor-extension-autocomplete':
+        specifier: workspace:^
+        version: link:../extensions/autocomplete
       '@tidbcloud/tisqleditor-extension-cur-sql-gutter':
         specifier: workspace:^
         version: link:../extensions/cur-sql-gutter
+      '@tidbcloud/tisqleditor-extension-linters':
+        specifier: workspace:^
+        version: link:../extensions/linters
       '@tidbcloud/tisqleditor-extension-save-helper':
         specifier: workspace:^
         version: link:../extensions/save-helper